问题背景

    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"