CORS 跨域与 TP5中跨域的解决方案
在做项目过程中,使用Vue-element-admin作为前端,ThinkPHP5作为后端框架进行开发,会遭遇跨域问题,本文给出ThinkPHP5解决跨域1.CORS的概念 CORS(Cross-Origin Resource Sharing 跨源资源共享),当一个请求 url 的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。2. 跨域点当浏览器检查到有跨域的问题...
在做项目过程中,使用Vue-element-admin作为前端,ThinkPHP5作为后端框架进行开发,会遭遇跨域问题,本文给出ThinkPHP5解决跨域
1.CORS的概念
CORS(Cross-Origin Resource Sharing 跨源资源共享),当一个请求 url 的协议、域名、端口三者之间任意一与当前页面地址不同即为跨域。
2. 跨域点
当浏览器检查到有跨域的问题,会对访问的接口做一个判断,如果是简单的接口,则直接访问,如果是复杂的接口,则需要先发送一个 option
请求,如果路由里面没有定义该接口的 option
请求,或者返回非200http状态码,就会报一个 404 错误。
3. 解决方案
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: GET,POST');
一般浏览器在检查到跨域问题时,会有两次请求,第一次是 option
,如果返回 200
,然后才会正式去访问接口。所以需要在有跨域的地方,都加上一个对 option
请求的处理.
对于ThinkPHP5来说,在其 application
目录下,有一个 tags.php
文件,这个能保证加载全局的函数。将 CORS
跨域处理文件的路径定义到 app_init
下,这就能保证,tp5 框架在初始化就加载这个跨域处理函数。
- 在
application->tags.php
文件中添加如下代码:
// 应用初始化
'app_init' => [
'app\\api\\behavior\\CORS'
],
- 新建文件
application->api->behavior->CORS.php
<?php
namespace app\api\behavior;
use think\Response;
class CORS
{
public function appInit(&$params)
{
header('Access-Control-Allow-Origin: *');
header("Access-Control-Allow-Headers: token,Origin, X-Requested-With, Content-Type, Accept");
header('Access-Control-Allow-Methods: POST,GET');
if (request()->isOptions()) {
exit();
}
}
}
更多推荐
所有评论(0)