cookie跨域问题汇总

一、通过nginx反向代理

通过nginx反向代理后，使得浏览器认为访问的资源都是属于相同协议，域名和端口的。

详细见：《nginx实现跨域访问》

二、jsonp方式请求

v　　jquery请求跨域：

　　JQuery对于Ajax的跨域请求有两类解决方案，不过都是只支持get方式。分别是JQuery的 jquery.ajax jsonp格式和jquery.getScript方式。

v　　jsonp格式：

　　如果获取的数据文件存放在远程服务器上（域名不同，也就是跨域获取数据），则需要使用jsonp类型。使用这种类型的话，会创建一个查询字符串参数 callback=? ，这个参数会加在请求的URL后面。服务器端应当在JSON数据前加上回调函数名，以便完成一个有效的JSONP请求。意思就是远程服务端需要对返回的数据做下处理，根据客户端提交的callback的参数，返回一个callback(json)的数据，而客户端将会用script的方式处理返回数据，来对json数据做处理。JQuery.getJSON也同样支持jsonp的数据方式调用。

v　　场景模拟：

　　两个工程web1, web2, 部署在本地同一台机器上的不同tomcat上，端口分别是8080和8089。

　　web2/index.html内容如下：

　　

   

　  web2/cooke.jsp内容如下：

　　

　

　　web1/index.html内容如下：

　　

　　

　　测试流程，首先通过谷歌浏览器访问http://localhost:8089/web2/index.html，F12，Network视图，查看内容如下：

　　

　　

　　或者通过浏览器设置->显示高级设置->隐私设置来查看写入的cookie，过程如下。

　　 

　　　　

　　接着，打开另一个窗口，访问http://localhost:8080/web1/index.html，这个页面是请求web2工程写入的cookie（注意，如果我们不是通过jsonp方式去访问，那么浏览器就会出现 不允许跨域访问 的提示）。同样 F12, Network视图，查看返回的数据如下。

 　　

　　

 

　　

　　

　　至此，通过jsonp方式的请求完成cookie跨域携带，也就是web1工程成功拿到了web2工程目录下的cookie。可以发现，jsonp会通过回调函数来处理服务器端返回的数据，因为返回的可以执行的js代码（也就是重写cookie的path和域），然后自动执行返回的js代码，从而达到目的。

三、解决cookie跨域问题之nodejs superagent

　　package.json中的模块依赖：

　　

　　调用superagent api请求：

　　

四、同一域下，不同工程下的cookie携带问题

　　cookie跨域访问之后，可以成功的写入本地域。本地的前端工程在请求后端工程时，有很多是ajax请求，ajax默认不支持携带cookie，所以现在有以下两种方案：

        （1）. 使用jsonp格式发送

        （2）. 

                 ajax请求中加上字段 xhrFields: {withCredentials: true}，这样可以携带上cookie

　　　　　　

　　　　　　

　　 　　　 这样后台配置就出现了限制，需要配置一个解决跨域访问的过滤器，而且header字段Access-Control-Allow-Origin的值不能为"*", 必须是一个确定的域。