cookie跨域携带

前提：http://192.168.1.3:8013和http://192.168.1.3:8012为静态服务

​ http://192.168.1.3:3000后台服务

方法一：

通过配置ajax请求头'withCredentials'为true，以及后台配置('Access-Control-Allow-Origin','IP端口'）和('Access-Control-Allow-Credentials',true)，注意：Access-Control-Allow-Origin不能配置为‘*’；

代码实例：

ajax代码：

document.cookie = "sessinId3 = 1231234";
jsUtils.cors.execAjax({
            method:'get',
            async:true,
            url:'http://192.168.1.3:3000/getJsonStr',
            withCredentials: true,
            reqType: 'application/json',
            success:function (res) {
                console.log(res);
            },
            error:function () {
                console.log('XDR失败');
            }
        })
复制代码

后台代码（以nodejs为例）

app.get('/getJsonStr', (req, res)=> {
    res.header('Access-Control-Allow-Origin','http://192.168.1.3:8013');
    res.header('Access-Control-Allow-Credentials',true);
    res.send(testData);
});
复制代码

方法二：

通过配置代理，利用服务器和服务器之间不存在跨域的特性，达到cookie的跨域携带，以及解决跨域请求

代码实例：

ajax代码：

document.cookie = "sessinId2 = 1231234";
jsUtils.cors.execAjax({
            method:'get',
            async:true,
            url:'/getJsonStr',
            success:function (res) {
                console.log(res);
            },
            error:function () {
                console.log('XDR失败');
            }
        })
复制代码

nginx服务配置代码

server {
      listen       8012;
      server_name  192.168.1.3;
      location / {
        root html2/;
      	index index.html index.htm;
      }

       location /getJsonStr {
            rewrite ^/getJsonStr/(.*)$/$1 break;
      		proxy_pass http://192.168.1.3:3000;
       }
    }
复制代码

总结：方法一的cookie跨域携带需要在每一个请求里加上withCredentials凭证，可以针对性的针对某一个ajax请求去配置是否携带cookie，方法二的通过代理配置携带cookie会在我代理的每一个请求都把cookie携带上。方法二方法一都可以灵活的配置去为某一个请求携带cookie，在项目中由于做单点登录，需要整合7个厂家cookie信息，已达到每一次请求都刷新cookie时间，并且本着减少其他厂家工作量的原因，故此采用了nginx服务配置的方式去携带cookie。

文章中若有理解错误的地方，欢迎大家批评。

转载于:https://juejin.im/post/5c0ce70be51d4522ad6e53df