前端请求接口携带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 #允许访问跨域资源不同使用通配符，只能使用单一的地址

同时前端需要设置

// 原生
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
- 通过查找，网上大多的设置的 domain 值都是以 "." 开头的域名，设置为 .google.com ，则所有以 google.com 结尾的域名都可以访问该Cookie。注意第一个字符必须为 "." 。
  
  解决方式4