在 CORS 机制中,客户端将请求分为了两种:简单请求和非简单请求;当请求为非简单请求时,就会触发浏览器发送预检请求,这是浏览器的行为。
预检请求会向服务器确认跨域是否允许,服务返回的响应头里有对应字段Access-Control-Allow-Origin来给浏览器判断:如果允许,浏览器紧接着发送实际请求;不允许,报错并禁止客户端脚本读取响应相关的任何东西。
入口文件index.php
//处理跨域预检请求
if($_SERVER['REQUEST_METHOD'] == 'OPTIONS'){
//允许的源域名
header("Access-Control-Allow-Origin: *");
//允许的请求头信息
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization,token");
//允许的请求类型
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
exit;
}
控制器方法需要继承的 控制器方法
//允许的源域名
header("Access-Control-Allow-Origin: *");
//允许的请求头信息
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization,token");
//允许的请求类型
header('Access-Control-Allow-Methods: GET, POST, PUT,DELETE,OPTIONS,PATCH');
前后端分离常见方法验证使用token,前端在header头里携带token。
后端写好后用Postman测试可以正常获取数据,跨域也是正常的,但在写前端vue项目的时候,发现携带token报错
解决方案:最开始写跨域没有带token字段,只写了Authorization,所以前端把token放在Authorization解决问题。但是改为将token信息放到header里的token字段就不行。
了解了上面预检就能解决。前端如果需要在header里携带token字段后端跨域就得加上去。简单点说,header携带什么,在后端允许放行就行。同时预检和接收请求的方法都得写跨域。预检不通过,后面的请求也不会通过
前端vue跨域
axios.interceptors.request.use(
config => {
if (localStorage.getItem("token")) {
config.headers.token = localStorage.getItem("token");
}
return config;
},
error => {
return Promise.reject(error);
}
)
postman在测试阶段可以拿到数据,估计是因为使用了代理,当然前端vue也可以通过代理的方式拿到数据,这里不作讲解。
感谢,看了这么多,就你这个是有用的
你肯定没有仔细看手册,请翻到完全开发手册,路由章节--》跨域请求,不用修改框架本身的文件,也不建议修改框架本身文件
谢谢大佬指点,学习到了。刚才看了下,thinkphp6文档里有跨域请求这块介绍,不过老版本里没有。谢谢批评,确实文档这块看的少,暂时只停留在用的层面。