PHP, Larave, Nginx 設定Header允許請求 CORS 的幾種方式 « 關於網路那些事...
跨域資源共享 CORS (Cross-origin resource sharing) 是一個 W3C 標準
這裡主要針對 php (Laravel) 以及 nginx 如何設定 CORS 進行說明
以及 Laravel 5.5 之後的版本自定義 cros Middleware 踩過的坑進行紀錄
首先,先看一般原生PHP設定 cors 的方式
PHP 設定 cors header
這裡是常見的設定方式:
Access-Control-Allow-Origin : 允許的域名,代表全部
Access-Control-Allow-Methods : 允許跨域請求的方法 (GET, POST, PUT, DELETE..),代表全部
Access-Control-Allow-Headers : 允許Header夾帶的訊息引數
Access-Control-Allow-Credentials : 允許傳送 cookie (布林值)
JWT 跨域 CORS 請求問題
在使用 JWT Header夾帶 token 跨域請求時,遇到了下列問題
檢查原始的 cors 設定如下:
發現,原來是 JWT api 請求在 Header 夾帶的 Authorization 尚未設定在允許清單
在後端程式碼加上去,前端就能正常與API溝通
Laravel 自建 Cors Middleware 設定跨域請求
在 Laravel 5.4以前的版本
可以直接建立一個 Cors Middleware,例如:
app/Http/Middleware/Cors.php
在 app/Http/Kernel.php 裡面的 $routeMiddleware 新增引用
就能直接在 route 裡使用,例如:
但是,在 Laravel 5.5 之後的版本若按照這樣的設定流程,仍會出現問題:
[ 解決方式 ]
在 app/Http/Kernel.php 裡面的 $middleware 新增引用 Cors MiddleWare 即可:
使用 Laravel Cors 拓展
直接在 Web Server 設定跨域允許設定
在 Nginx 的 default.conf 直接設定,例如:
設定完成之後,再重啟 nginx server 即可
最後提醒,如果再 Nginx 設定,就必須移除 PHP 中的 CORS
避免重複定義 HEADER 規則導致錯誤
如果你喜歡我們的文章內容,請在這裡按個讚
Tweet