ajax、fetch 跨域携带cookie

一、ajax 跨域携带cookie

原生ajax请求方式：

var xhr = new XMLHttpRequest();  
xhr.open("POST", "http://xxxx.com/demo/b/index.php", true);  
xhr.withCredentials = true; //支持跨域发送cookies
xhr.send();

jquery的post方法请求：

 $.ajax({
    type: "POST",
    url: "http://xxx.com/api/test",
    dataType: 'jsonp',
    xhrFields: {withCredentials: true},
    crossDomain: true,
})

服务器端设置：

header("Access-Control-Allow-Credentials: true");
header("Access-Control-Allow-Origin: http://www.xxx.com");

二、 fetch 带cookie跨域访问

前后端分离，用nginx做请求跨域处理。用了fetch来替代ajax，访问正常，但是请求时没带cookie，就加了credentials: "include"

var myHeaders = new Headers();
fetch(url, {
              method: 'GET',
              headers: myHeaders,
              credentials: "include"
            })

在后台配置

response.setHeader("Access-Control-Allow-Credentials","true");

三、前后端分离联调 setCookie出现问题的解决办法

1、问题原因：cookie的作用域是domain本身以及domain下的所有子域名。
后端PHP用setcookie 来设置网站的cookie，该函数的用法如下：

bool setcookie ( string $name [, string $value [, int$expire = 0 [, string$path [, string $domain [, bool$secure = false [, bool$httponly = false ]]]]]] )

它的第五个参数$domain决定了cookie的作用域。作用域的限制使得setCookie失败

2、解决办法
前端电脑绑定host

// vim /etc/hosts
# host绑定
127.0.0.1 dev.bb.aa.ke.com

webpack代理设置如下

proxy: {
            '/api/**': {
                target:'http://develop.bb.aa.ke.com',
                secure: false,
                changeOrigin: true, // 第一种方式 代理服务器会在请求头中加入相应Host首部
               // 第二种方式 手动写首部host
                /*headers: {
                    host: 'develop.bb.aa.ke.com'
                }*/
            }
        }

开发时，浏览器访问 http://dev.bb.aa.ke.com:6666/