Laravel 設定 CORS

更新於 發佈於 閱讀時間約 3 分鐘

從瀏覽器console看到類似這個error: ..... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource

表示遇到CORS的問題,在Laravel中有現成的套件(fruitcake/laravel-cors)可以直接用,但我個人是遇到不work的問題,config/cors.php中不管怎麼設定都不會跑middleware的code,後來改成直接改bootstrap/app.php,在最下面return前加入:

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: *');

再自行根據需求把*改掉,這個方法經測試OK!

可以改成類似這種寫法,解決Access-Control-Allow-Origin需設定多個domain的問題:

raw-image

注意:
app/Http/Kernel.php中的protected $middleware = [...];
裡面如果有用到\Fruitcake\Cors\HandleCors::class
記得要註解或刪掉,不然會導致上述改bootstrap/app.php的方法也失效!


2023/12/16 補充:

Laravel 9.2以後就直接內建fruitcake/laravel-cors此套件了,所以可以直接使用config/cors.php這個檔案來設定CORS,預設如下圖:

raw-image

例如把allowed_origins改成http://localhost:3000,這是我前端開發的url:

raw-image

因此不再需要用bootstrap/app.php這個方式了。



本筆記參考:
1. https://github.com/fruitcake/laravel-cors
2. https://github.com/fruitcake/laravel-cors/issues/494
3. https://stackoverflow.com/questions/39429462/adding-access-control-allow-origin-header-response-in-laravel-5-3-passport
4. https://stackoverflow.com/questions/1653308/access-control-allow-origin-multiple-origin-domains


留言
avatar-img
留言分享你的想法!
avatar-img
Vic Lin的沙龍
20會員
161內容數
Vic Lin的沙龍的其他內容
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/08/13
父元件 傳遞方法使用@ <template>    ...    <Login @modalClose="modalClose"/> ... </template> <script setup>     const _modal = ref();     function m
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/25
前情提要 由於我的筆電已經用了10年,無法再戰下去了,且有預算考量,加上使用電腦幾乎都是定點,只有偶爾回家的時候會需要攜帶,因此最終選擇了迷你電腦,體積小不占空間,又方便攜帶,剛好符合我的需求。 菜單 由於這台無法裝獨顯,所以CPU的部分選擇 AMD R5 3400G(含Vega 11內
Thumbnail
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
2023/03/10
Nuxt3中可使用useFetch來獲取數據,不須再引用axios,相當方便: 本筆記參考: https://juejin.cn/post/7104071421160063012 https://juejin.cn/post/7086472647575339045
看更多
你可能也想看
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
孩子寫功課時瞇眼?小心近視!這款喜光全光譜TIONE⁺光健康智慧檯燈,獲眼科院長推薦,網路好評不斷!全光譜LED、180cm大照明範圍、5段亮度及色溫調整、350度萬向旋轉,讓孩子學習更舒適、保護眼睛!
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
創作者營運專員/經理(Operations Specialist/Manager)將負責對平台成長及收入至關重要的 Partnership 夥伴創作者開發及營運。你將發揮對知識與內容變現、影響力變現的精準判斷力,找到你心中的潛力新星或有聲量的中大型創作者加入 vocus。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
在開發前後端分離架構時,使用兩個不同網域所遇到跨域請求問題。特別是在POST請求時行為差異大,揭示了「簡單請求」與「預檢請求」的關鍵差異。簡單請求不需預檢,但application/json會觸發預檢請求,需透過特定設定解決。分享這篇文章希望幫助開發者有效處理跨域問題。
Thumbnail
上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
Thumbnail
上篇記錄了關於 HTTP request 的筆記,這篇則是對於請求的回應紀錄~
Thumbnail
Error: wamp解法: 1. 下載cacert.pem 到這邊下載: https://curl.se/docs/caextract.html 2. 將檔案放到ssl folder 路徑類似這樣,放在自己使用的php版本下: 3. 在php.ini中加入cacert.pem的path
Thumbnail
Error: wamp解法: 1. 下載cacert.pem 到這邊下載: https://curl.se/docs/caextract.html 2. 將檔案放到ssl folder 路徑類似這樣,放在自己使用的php版本下: 3. 在php.ini中加入cacert.pem的path
Thumbnail
在Laravel中除了用Validator來驗證資料,還可以用Form Request Validation,建立一個驗證class,在request進入controller之前,會先在這邊做驗證,若驗證失敗則不會繼續執行Controller。 建立form request: 範例程式碼:
Thumbnail
在Laravel中除了用Validator來驗證資料,還可以用Form Request Validation,建立一個驗證class,在request進入controller之前,會先在這邊做驗證,若驗證失敗則不會繼續執行Controller。 建立form request: 範例程式碼:
Thumbnail
從瀏覽器console看到類似這個error:  ..... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 表示遇到CORS的
Thumbnail
從瀏覽器console看到類似這個error:  ..... has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource 表示遇到CORS的
Thumbnail
本文使用網站的 FB 登入做示範 採用 Laravel 8 + Socialite 5 使用 Session 記錄狀態 不同版本可能會有些許語法及方法上的差異,請自行調整 前言 最近因為碰到需要實作 OAuth 第三方登入的需求,只好把之前隨便看看的東西撿回來研究並實作。不過我找到多數現存的中文文章
Thumbnail
本文使用網站的 FB 登入做示範 採用 Laravel 8 + Socialite 5 使用 Session 記錄狀態 不同版本可能會有些許語法及方法上的差異,請自行調整 前言 最近因為碰到需要實作 OAuth 第三方登入的需求,只好把之前隨便看看的東西撿回來研究並實作。不過我找到多數現存的中文文章
Thumbnail
本文模擬user註冊的情境來簡單演示,在Laravel中如何透過ajax來存取資料,以post request為例。 前端透過post把user資料送到controller中,並且透過model把資料塞進DB,最後回傳json response。 完整source cod
Thumbnail
本文模擬user註冊的情境來簡單演示,在Laravel中如何透過ajax來存取資料,以post request為例。 前端透過post把user資料送到controller中,並且透過model把資料塞進DB,最後回傳json response。 完整source cod
Thumbnail
Laravel Framework version: 8.12.3 本範例做了兩個,一個是進到首頁顯示hello world!,另一個是進到article頁面時,從資料庫把文章抓出來顯示。 ...
Thumbnail
Laravel Framework version: 8.12.3 本範例做了兩個,一個是進到首頁顯示hello world!,另一個是進到article頁面時,從資料庫把文章抓出來顯示。 ...
Thumbnail
想從javascript拿到不同源的資料,除了上一篇介紹的CORS,其實還有一個東西叫JSOP,是指透過script tag src的方式繞過同源政策來實現cross origin。
Thumbnail
想從javascript拿到不同源的資料,除了上一篇介紹的CORS,其實還有一個東西叫JSOP,是指透過script tag src的方式繞過同源政策來實現cross origin。
Thumbnail
Cross-Origin Resource Sharing 簡稱 CORS,中文為跨來源資源共享。 上一篇提到web瀏覽器有同源政策的限制,而CORS則是一種安全確認機制,讓瀏覽器和伺服器之間能確保安全的進行cross origin資源共享,即若伺服器同意,即可達成跨來源資源共享。
Thumbnail
Cross-Origin Resource Sharing 簡稱 CORS,中文為跨來源資源共享。 上一篇提到web瀏覽器有同源政策的限制,而CORS則是一種安全確認機制,讓瀏覽器和伺服器之間能確保安全的進行cross origin資源共享,即若伺服器同意,即可達成跨來源資源共享。
追蹤感興趣的內容從 Google News 追蹤更多 vocus 的最新精選內容追蹤 Google News