Ajax 跨域携带 cookie

前端处理

原生 js 中 ajax 

const url = `接口地址`; 
let xml = new XMLHttpRequest();
xhr.withCredentials = true; //一个布尔值，用来指定跨域 Access-Control 请求是否应带有授权信息，如 cookie 或授权 header 头。
xml.open('POST', url) //设置请求方式及接口地址
xml.setRequestHeader("token",window.localStorage.getItem('token'));　　//设置请求头，按需使用
xml.send();
xml.onreadystatechange = (e) => {　　//服务端响应后
    if (xml.readyState == 4) {　　//判断客户端是否可以使用   
        if(xml.status == 200){    //表示成功处理请求
            alert("请求成功");
        }
    }
}

相关文章

jquery 中 ajax

 $.ajax({
            url: "http://localhost:8080/orders",
            type: "GET",
           //  默认情况下，标准的跨域请求是不会发送cookie的
            xhrFields: {
                withCredentials: true
            },
           // 如果 携带不过去去 withCredentials:true,可以使用下面的方法
          /* beforeSend: function (xhr) {
　　　　　　    xhr.withCredentials = true
　　　　     }, */
            crossDomain: true, //false表示同一域请求，true表示跨域请求，携带跨域的额外信息，不包括cookie。
            success: function (data) {
                render(data);
            }
 });        

 

注意：支持withCredentials属性的浏览器有Firefox 3.5+、Safari 4+和Chrome。IE10及更早版本都不支持。

在jQuery1.5中，withCredentials这个属性不在原生的xhr中，所以这个请求会被忽略到。若要测试这个例子，需要使用jQuery1.5.1。

axiox 中的处理

// 单独设置
axios.defaults.withCredentials = true
// 或者在 axios 配置项中设置,表示跨域请求时是否需要使用凭证
withCredentials: true, 

 vue 中设置代理

 

后端配置

// 允许的头部携带的信息 X-Requested-With 区分ajax 请求还是普通方法请求
header('Access-Control-Allow-Headers:X-Requested-With,Content-Type,XX-Device-Type,XX-Token,XX-Api-Version,XX-Wxapp-AppId,Authorization,Cookie');
// 允许请求的方法
header('Access-Control-Allow-Methods:GET,POST,PATCH,PUT,DELETE,OPTIONS');

if(strtoupper($request->method())== 'OPTIONS'){
     // 跨域问题 允许访问的域名,如果前端配置了这个withCredentials=true，后段设置Access-Control-Allow-Origin不能为 " * ",必须是你的源地址
     header('Access-Control-Allow-Origin:源地址');
     // 对请求的响应允许暴露前端的js，服务端使用session 存储，session 是依赖于 cookie，所以前端必须允许携带 cookie
     header('Access-Control-Allow-Credentials:true');
     exit;
}

前端 ajax 会发送2次请求，是因为使用了带预检(Preflighted)的跨域请求。该请求会在发送真实的请求之前发送一个类型为OPTIONS的预检请求。预检请求会检测服务器是否支持我们的真实请求所需要的跨域资源，唯有资源满足条件才会发送真实的请求。比如我们在请求头部增加了authorization项，那么在服务器响应头中需要放入Access-Control-Allow-Headers，并且其值中必须要包含authorization，否则OPTIONS预检会失败，从而导致不会发送真实的请求。当前使用的是 PHP 语言，如果请求方法是 OPTIONS，直接返回不处理。

服务器配置

如果前端使用了  Authorization ，服务端（apache）需要配置， 在根目录创建  .htaccess  文件

// 第一种方法
Authorization Headers
RewriteCond %{HTTP:Authorization} ^(.+)$
RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]
// 第二种方法
<IfModule mod_rewrite.c>
    SetEnvIf Authorization .+ HTTP_AUTHORIZATION=$0
</IfModule>

 nginx 服务器反向代理

server {
    # nginx监听所有 test.com:9000 端口收到的请求
 
    listen       9000;
    server_name  test.com;
 
    # test.com:9000 会被转发到 192.168.25.20:9000
    location / {
        proxy_pass http://192.168.25.20:9000;
    }
 
    # test.com:9000/api/ 会被转发到 "192.168.25.20:9000/api/"
 
    location /api/ {
        proxy_pass http://192.168.25.20:9000;
    }
}