问题背景
WeX5是典型的html5+js架构。源文件全部放到服务器的UI Server中,使用通用的tomcat,例如使用域名www.wuyoubar.cn:8080/x5。
Android和IOS的服务器端Django已经实现了json的处理,json的主域名www.wuyoubar.cn:80
PC访问WeX5页面。避免重复进行数据处理,WeX5的JS代码里面直接使用Ajax请求Django的json接口数据。这样就出现了跨域的问题,对于客户端来说,请求的源码,页面文件,css和js代码等都从8080端口获取,但json数据从80获取的。
解决办法
1、WeX5的Ajax的POST请求中增加支持跨域的属性xhrFields和crossDomain
$.ajax({
"type":"get",
"async" : true,
"url" : globalNet.getMyClassURL(),
"dataType":"json",
xhrFields: {
withCredentials: true
},
crossDomain: true,
success : function(data) {
//alert(JSON.stringify(data));
if(data){
//数据获取失败,状态是未登陆
if(!globalNet.statusIsOK(data[0])){
//justep.Util.hint(data[0].UserMsg);
//self.toLogin("msgContent");
}
//数据获取成功,装载
else{
myClass.loadData(globalFunc.getListData(
globalFunc.getMyClassUserData(),data)
,true);
//组件刷新
myClass.loaded = true;
myClass.refreshData();
globalFunc.setOnLine(true);
}
//判断是否需要跳转到登录或者绑定页面
//self.initWindows();
}
else{
//登录失败
//justep.Util.hint("数据加载失败");
}
self.initWindows()
},
error : function(){
justep.Util.hint("网络异常");
}
});
2、Django服务器,csrf的response处理process_response,头中添加Origin和Credentials属性即支持跨域
#print request.META
#Support the WeX5 cross domain
if response.get("Access-Control-Allow-Origin")is None and request.META.get("HTTP_ORIGIN") is not None:
response["Access-Control-Allow-Origin"] = request.META.get("HTTP_ORIGIN")
response["Access-Control-Allow-Credentials"] = "true"