如何設定 Laravel CORS 接受 Nuxt 3 代理 HTTP 請求？

Question

我正在嘗試將客戶端請求從Nuxt 3 發送到api 路由，該路由通往Laravel 中的身份驗證控制器，但它返回：

Access to fetch at 'http://127.0.0.1:8000/api/authenticate' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

請求由 Nuxt 3 的 $fetch api 傳送：

$fetch('http://127.0.0.1:8000/api/authenticate', {
        method: 'POST',
        body: form
    }).then((res) => {console.log(res)})

請求似乎在到達控制器之前就被停止了。這是routes/api.php：

// works
Route::get('/test', function () {
    return 'hello laravel';
});

// doesn't work, throws CORS error before request can reach Controller
Route::post('/authenticate', [AuthenticatedSessionController::class, 'test']);

// works
Route::post('/authenticate', function () {
    return 'works';
});

從 Laravel 9.2 開始，似乎有一個 config/cors.php 檔案可以配置，但我不知道如何配置。預設情況如下所示：

<?php

return [

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

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

知道如何允許來自 Nuxt 3 的 api 請求 到 auth 路由 嗎？

Answer 1

對於 Laravel 開發者來說，開始 SSR Nuxt 之旅可能非常容易，尤其是當您使用 Homestead 編寫 Laravel 時

您的SSR Nuxt 網站可能使用example.com 作為網域，您的Laravel API 也可以透過前綴http://example.com/api 呼叫（路由位於routes/api.php)

#Nginx 設定可能是

# before (Laravel default)
    location / {
        try_files $uri $uri/ /index.php?$query_string;   
    }

    # after
    proxy_set_header X-Forwarded-For $remote_addr;
    location ~* ^/(api|broadcasting|storage)/ {
        try_files $uri $uri/ /index.php?$query_string;
    }
    location / {
        # the requests will be proxied to SSR Nuxt
        proxy_pass http://127.0.0.1:3000;
    }

在你的 SSR Nuxt3 中

$fetch('/api/authenticate', {
    method: 'POST',
    body: form
}).then((res) => {console.log(res)})

之後，您就可以節省處理 CORS 的時間。

---

有關 proxy_set_header X-Forwarded-For $remote_addr; 的更多資訊：

在SSR Nuxt中，有些請求是從前端伺服器發送的，有些請求是從客戶端瀏覽器發送的。當來自前端伺服器時，它可能會用自己的IP而不是客戶端的IP來觸發Laravel節流，為了避免這種情況，你可以添加一個proxy_set_header X-Forwarded-For $remote_addr;代码> 首先。然後為您的 Nuxt 請求新增請求標頭。

在SSR Nuxt2（使用@nuxtjs/axios）中，plugins/axios.js

#

export default ({ $axios, store, req, error:nuxtError }) => {
    if (process.server) {
        $axios.setHeader('X-Forwarded-For', req.headers['x-forwarded-for']);
    }
}

在SSR Nuxt3中，由於包含官方HTTP客戶端，因此不需要axios，請查看解決方案在這裡

#