HTML5 App 跨域请求 携带cookie

HTML5 App 跨域请求 携带cookie。最近在弄一个html5 app 的项目，因为此项目是前期开发，暂时用html app。使用的是HBuilder为IDE；前端框架为mui；后端为.NET；

刚开始我一直在做后端的业务，将业务代码编写并测试完成后，就同前端开发人员进行数据交互。此时麻烦的问题随之产生，先是数据获取不到，访问不到url地址。弄了会才知道是IIS Express运行的网站端口没有添加到防火墙中。添加上去后，测试又是一个问题：跨域问题 问题图示如下：

一、解决跨域问题的常用方案：

1、jsonp

前端js:

$.ajax('http://192.168.1.8:53311/TradeData/Login', {
    dataType: 'jsonp',//设置Response数据类型为jsonp格式
    jsonp: 'callback',//设置回调函数名，默认为callback
    jsonpCallback: "LoginCallback",//自定义jsonp回调函数名称
    success: function(data) {
        console.log("login success");
    },
    error: function(xhr, type, errorThrown) {
        console.log(xhr);
        alert("error");
    }
});

后端（.NET）

public void MethodName(){
    AjaxResult res = new AjaxResult();//这是我自定义的Action返回结果类
    this.Response.Write(string.Format("{0}({1})", this.Request["callback"], res.ToJson()));
}

测试jsonp发现的现象
1)jsonp，在请求成功后现调用jsonpCallback设定的回调函数，然后再调用success的函数，并带有参数。
2)将携带cookie解决后，使用jsonp跨域请求，在chrome调试窗口中可以查看到cookie列表。而使用第二种方法跨域，在chrome调试窗口中不可以看到cookie。

2、Access-Control-Allow-Origin

前端$.ajax不变，只在后端（.NET）Action方法中加入：
此方式中你可以任意设定可访问的域，那么其他不知道的域是什么的也就访问不到，但任然无法防止其他人强制使用后端HttpWebRequest访问，如果要更加安全，那就得在代码上下功夫，其他的就不多说了，毕竟这也不是本文所主讲内容

public string MethodName(){
    AjaxResult res = new AjaxResult();
    this.Response.AddHeader("Access-Control-Allow-Origin", "域名/ip+port");//例如：http://localhost:8020
    return res.toJson();
}

二、携带cookie：

现在虽然能够跨域请求，获取服务端数据，但在服务端要做登录验证操作，都是通过cookie/session来判断的，那么这个时候必然要使用到cookie。可服务端怎么获取cookie又是一个问题。后来我在网上找了很多答案，最后算是找到，并测试通过，所以此时同大家分享一下，以便日后那位同行也遇到此类问题，也就不再这上面麻烦了。废话不多说，言归正传：
在$.ajax中增加两个属性：crossDomain:true,xhrFields: {withCredentials: true},
前端js:

$.ajax('http://192.168.1.8:53311/TradeData/Login', {
    dataType: "json",
    type: "post",
    crossDomain: true,
    xhrFields: {
        withCredentials: true
    },
    success: function(data) {
        console.log("login success");
    },
    error: function(xhr, type, errorThrown) {
        console.log(xhr);
        alert("error");
    }
});

后端（.NET）

public string MethodName(){
    this.Response.AddHeader("Access-Control-Allow-Credentials", "true");
    ...
}

crossDomain ： 请求偏向外域；
xhrFields ： 如果你想向服务器发送cookies的话，设置withCredentials为true，而且你的服务器必须返回头部带有’Access-Control-Allow-Credentials: true’的回应