首页 > 程序开发 > 移动开发 > 其他 >

HTML5 App 跨域请求 携带cookie

2017-07-04

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

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’的回应

相关文章
最新文章
热点推荐