Laravel CORS


#Laravel#PHP#CORS

CORS(Cross-Origin Resource Sharing,跨來源資源共享)是一種網頁安全機制,允許瀏覽器在不同來源(不同網域、協議或埠)之間安全地請求資源。它是 HTTP 標頭的一部分,能夠讓伺服器控制哪些來源可以存取它的資源,從而防止惡意網站發送未經授權的請求。

出於安全考量,瀏覽器內建了同源政策(Same-Origin Policy, SOP),限制網頁只能向相同來源的伺服器發送請求。如果網頁嘗試存取不同來源的資源(如 API、圖片、字型等),瀏覽器會阻擋這些請求。CORS 透過額外的 HTTP 標頭讓伺服器明確告訴瀏覽器「這些來源是被允許的」,從而放寬同源政策的限制。

如果後端沒有設定允許跨來源會收到 Http Status Code 200,但會是 CORS error。

Request URL: https://mtsung.com/api/members
Request Method: GET
Status Code: 200 OK
Referrer Policy: strict-origin-when-cross-origin

在 Laravel 9.2 前的版本必須自己安裝 fruitcake/laravel-cors ,在 Laravel 9.2 以後 Laravel 核心已包含 fruitcake/laravel-cors 了,可以直接使用以下指令產生 config/cors.php

php artisan config:publish cors

產生的 config/cors.php 如下

<?php

return [

    /*
    |--------------------------------------------------------------------------
    | Cross-Origin Resource Sharing (CORS) Configuration
    |--------------------------------------------------------------------------
    |
    | Here you may configure your settings for cross-origin resource sharing
    | or "CORS". This determines what cross-origin operations may execute
    | in web browsers. You are free to adjust these settings as needed.
    |
    | To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
    |
    */

    'paths' => ['api/*', 'sanctum/csrf-cookie'],

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

預設他會將 api/* 與 sanctum/csrf-cookie 加入 paths 中,如果要全部 route 都允許的話直接改成 ['*'] 即可

'paths' => ['*']

若要在純 PHP 專案中解決可以加上

<?php
// 前面不要有其他輸出
header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: *');

注意 header() 前不要有其他 echo 字元,否則瀏覽器會解析不到。


參考:
https://github.com/fruitcake/laravel-cors