• 【网络开发】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"

    好记性不如烂笔头
  • 相关阅读:
    Redis 设计与实现(第三章) -- 链表adlist
    Redis 设计与实现(第二章) -- SDS
    MySQL索引背后的数据结构及算法原理(转)
    MySQL索引原理及慢查询优化(转)
    MySQL常见的一些面试题(未完待续)
    js 获取前天、昨天、今天、明天、后天的时间
    linux 下nohup 使用
    java split 分割字符串用法
    Python 获取URL访问的HEAD头信息
    MySQL日期数据类型、时间类型使用总结
  • 原文地址:https://www.cnblogs.com/inns/p/5497532.html
Copyright © 2020-2023  润新知