前言
平时在公司做项目的时候,也经常热心帮朋友解决问题(划水),这天朋友出现一个需求,需要做单点登录。从官网退出登录之后,页面需要自己重定向到登陆页面。但是重定向之后,请求会报 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;
}
复制代码
打完,收工。 个人的博客,记录一下自己平时学习的笔记