thinkphp5 前后端分离实现跨域

在做项目过程中,使用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();
              }
  
      }
  
  }
             

本文转载自https://www.ruoxiaozh.com/blog/article/59