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