ThinkPHP6.0处理前端请求跨域问题AllowCrossDomain
2022-11-24 11:10:29
186
{{single.collect_count}}

按照官网给出的例子,在中间件配置允许跨域

app/middleware.php

<?php// 中间件配置use think\middleware\AllowCrossDomain;return [AllowCrossDomain::class];

前端请求依然出现了跨域请求提示

Access to XMLHttpRequest at from origin has been blocked by CORS policy: Request header field x-token is not allowed by Access-Control-Allow-Headers in preflight response.

原因是我们添加了自定义的请求头X-Token用来携带token,所以需要我们重新改造一下中间件

新建一个自定义的跨域中间件

app/middleware/AllowCrossDomainMiddleware.php

<?phpnamespace app\middleware;use think\middleware\AllowCrossDomain;class AllowCrossDomainMiddleware extends AllowCrossDomain{// 加入自定义请求头参数 X-Tokenprotected $header = ['Access-Control-Allow-Credentials' => 'true','Access-Control-Max-Age' => 1800,'Access-Control-Allow-Methods' => 'GET, POST, PATCH, PUT, DELETE, OPTIONS','Access-Control-Allow-Headers' => 'Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With, X-Token',];}

重新配置中间件

app/middleware.php

<?php// 中间件配置use think\middleware\AllowCrossDomain;use app\middleware\AllowCrossDomainMiddleware;return [// 不使用默认的跨域中间件// AllowCrossDomain::class// 使用自定义跨域中间件AllowCrossDomainMiddleware::class];

继续改进

查看请求日志发现,options请求会走一遍处理流程,有些需要权限校验的地方还会因为缺少参数而报错,这样肯定不行。

可以在入口文件添加以下代码,单独处理options请求

public/index.php

// 处理 OPTIONS 请求if($_SERVER['REQUEST_METHOD'] == 'OPTIONS'){header("'Access-Control-Allow-Credentials: true");header("Access-Control-Allow-Origin: *");header("Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With, X-Token");header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS, PATCH');exit; // 直接退出,不走后序流程}

添加了发现有的接口还是会有跨域问题存在, POST方式漏处理了,再次优化如下

// 添加允许跨域请求头header("'Access-Control-Allow-Credentials: true");header("Access-Control-Allow-Origin: *");header("Access-Control-Allow-Headers: Authorization, Content-Type, If-Match, If-Modified-Since, If-None-Match, If-Unmodified-Since, X-CSRF-TOKEN, X-Requested-With, X-Token");header('Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS, PATCH');// 处理 OPTIONS 请求if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {exit;}

参考
https://www.kancloud.cn/manual/thinkphp6_0/1037493
ThinkPHP 5.1.37 开发跨域问题解决

回帖
全部回帖({{commentCount}})
{{item.user.nickname}} {{item.user.group_title}} {{item.friend_time}}
{{item.content}}
{{item.comment_content_show ? '取消' : '回复'}} 删除
回帖
{{reply.user.nickname}} {{reply.user.group_title}} {{reply.friend_time}}
{{reply.content}}
{{reply.comment_content_show ? '取消' : '回复'}} 删除
回帖
收起
没有更多啦~
{{commentLoading ? '加载中...' : '查看更多评论'}}