CORS 跨域与 TP5中跨域的解决方案 解决options请求失败

在做项目过程中,使用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
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值