跨域cookie携带实践

2019-03-05

前端请求接口携带cookie报错Refused to set unsafe header

前言

在开发中后端接口和前端由于不在一个电脑/ip上开发，由于浏览器存在的同源策略参考MDN，在进行调试的时候久会出现跨域的问题

常见的解决方法有jsonp，添加跨域头等方法，实际上最简单的还是通过设置跨域浏览器来实现跨域请求

实现方法参考:跨域浏览器

存在的问题

使用跨域浏览器开发时，简单的跨域请求都不会被浏览器拦截，而携带cookie进行请求时就会报错refused to set unsafe header

解决方式1

  • 后端设置响应头：
1
2
Access-Control-Allow-Credentials: true #允许客户端携带跨域cookie
Access-Control-Allow-Origin: www.abc.com #允许访问跨域资源 不同使用通配符，只能使用单一的地址
  • 同时前端需要设置
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
// 原生
var xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.withCredentials = true; // 携带跨域cookie
xhr.send();

// jquery
$.ajax({
    type: "GET",
    url: url,
    xhrFields: {
        withCredentials: true // 携带跨域cookie
    },
    processData: false,
    success: function(data) {
        console.log(data);  
    }
});

// axios
axios.defaults.withCredentials=true; // 让ajax携带cookie
  • 通过设置后仍然不能携带cookie，继续尝试解决

解决方式2

  • 通过后端返回cookie，在后端和postman都能看到有cookie出现，但是在前端部分控制台看不到cookie的响应头

  • 查找以后发现后端未设置cookie的domain属性，仅请求的地址能显示cookie

  • domain：表示cookie所在的域，默认为请求的地址，如网址为JavaScript.exam.cn/JavaScript/read.html，那么domain默认为JavaScript.exam.cn。如域A为catagory.exam.cn，域B为JavaScript.exam.cn，那么在域A生产一个令域A和域B都能访问的cookie就要将该cookie的domain设置为.exam.com；如果要在域A生产一个令域A不能访问而域B能访问的cookie就要将该cookie的domain设置为JavaScript.test.com。

解决方式3

  • 后端通过setDomain()方法设置domain属性后，在Postman发现仍然没有修改成功domain值，因为两台电脑的地址都是ip地址，设置domain为ip地址后似乎没用？

  • 通过查找，网上大多的设置的domain值都是以"."开头的域名，设置为.google.com，则所有以google.com结尾的域名都可以访问该Cookie。注意第一个字符必须为"."。

解决方式4

  • 简单粗暴，自己电脑上跑一个后端的项目，这样和前端就处于同一个地址，可以获取cookie :)

以上解决供大家参考。也记录一下

#前端