Ajax 跨域携带 cookie

2022-08-10 15:04:07 阅读：179 来源： 互联网

标签：xml withCredentials Access Ajax cookie 请求 true 跨域

前端处理

原生 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表示跨域请求。它可以使服务器端重定向到另外一个域。
            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>

标签：xml,withCredentials,Access,Ajax,cookie,请求,true,跨域
来源： https://www.cnblogs.com/xuey/p/16572432.html

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

Ajax 跨域携带 cookie

前端处理

后端配置

服务器配置