(解决)记一次跨域不携带cookie，请求方式改变的问题

前言

平时在公司做项目的时候，也经常热心帮朋友解决问题(划水)，这天朋友出现一个需求，需要做单点登录。从官网退出登录之后，页面需要自己重定向到登陆页面。但是重定向之后，请求会报 403。并且请求方式变成了 options

我们一步步分析，先了解状态码403是什么意思→解决请求方式问题

状态码

我们前端经常接触的状态码有：200、404、403、400、505

其中：

200： 代表请求成功接收并成功响应

404： 代表请求服务端接收了，但是并没有找到对应的资源

403： 服务器理解请求客户端的请求，但是拒绝执行此请求

400： 客户端请求的语法错误，服务器无法理解

505： 服务器不支持请求的HTTP协议的版本，无法完成处理（一般在后端限制是https协议请求还是http协议请求的时候出现）

知道了 403 状态码的意义，那么就先从 Network 每个请求排查起，最后发现由于跨域，原本自动带上的 cookie并没有带在请求头里。

解决

查阅资料之后发现，原生XMLHttpReques是有一个属性 withCredentials，MDN上对它的详解 该值是一个 Boolean。默认为 false，是浏览器为了安全，拒绝跨域之间传递携带 cookie 请求头。

const xhr  = new XMLHttpRequest();
xhr.open('GET', 'https://wuxin.netlify.com', true);
xhr.withCredentials = true;
xhr.send(null);
复制代码

解决不挟带 cookie 之后，就剩下请求方式改变的问题了。

解决请求头

问题出现的原因：跨域之后，浏览器会先发送的是一种**"预检"请求**，此时作为服务端，也需要返回**"预回应"**作为响应。"预检"请求实际上是对服务端的一种权限请求，只有当"预检"请求成功返回，实际请求才开始执行

解决：

在判断请求方式的地方，增加一个判断

if("OPTIONS".equals(request.getMethods())){
    return false;
}
复制代码

打完，收工。 个人的博客，记录一下自己平时学习的笔记

转载于:https://juejin.im/post/5c979412f265da612c3a476b