報錯：has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

環境：thinkphp6 +nginx

今天和VUE配合調用接口的時候發現跨域報錯。

參考

跨域請求 · ThinkPHP5.1完全開發手冊 · 看云

中間件 · ThinkPHP6.0完全開發手冊 · 看云

按照官網給出的例子，在中間件配置允許跨域

<?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.

php在批量導入excel數據更新時偶爾會出現這個問題，出現時間不定，中間件都配置了跨域還是不行。

新建一個自定義的跨域中間件

<?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',];
}

重新配置中間件

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

中間件，入口文件、路由都折騰了好幾遍不行。

?最后解決辦法：

可以在入口文件添加以下代碼，單獨處理options請求

public/index.php

// 添加允許跨域請求頭
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;
}

?