【网络开发】WeX5的Ajax和Django服务器json接口对接跨域问题解决

问题背景

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"