Bagaimana untuk mengkonfigurasi Laravel CORS untuk menerima permintaan HTTP proksi Nuxt 3?

Question

Saya cuba membuat permintaan pelanggan daripada Nuxt 3 发送到 api 路由，该路由通向 Laravel 中的身份验证控制器 tetapi ia kembali:

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.

Permintaan dihantar oleh $fetch api untuk Nuxt 3:

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

Permintaan nampaknya tiba控制器之前就被停止了。这是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';
});

Ia boleh dikonfigurasikan daripada fail Laravel 9.2 开始，似乎有一个 config/cors.php, tetapi saya tidak tahu caranya. Lalai kelihatan seperti ini:

<?php

return [

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

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

Ada idea bagaimana untuk membenarkan api 请求 到 auth 路由 dari Nuxt 3?

Answer 1

Untuk pembangun Laravel, memulakan perjalanan SSR Nuxt anda boleh menjadi sangat mudah, terutamanya apabila anda menulis Laravel menggunakan Homestead

Tapak SSR Nuxt anda mungkin menggunakan example.com 作为域，您的 Laravel API 也可以通过前缀 http://example.com/api 调用（路由位于routes/api.php)

Konfigurasi Nginx mungkin

# 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;
    }

Dalam SSR Nuxt3 anda

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

Selepas itu, anda boleh menjimatkan masa berurusan dengan CORS.

---

Berkaitan proxy_set_header X-Forwarded-For $remote_addr; 的更多信息:

Dalam SSR Nuxt, beberapa permintaan dihantar daripada pelayan bahagian hadapan dan beberapa permintaan dihantar daripada pelayar klien. Apabila datang dari pelayan bahagian hadapan, ia mungkin mencetuskan pendikitan Laravel dengan IPnya sendiri dan bukannya IP pelanggan, untuk mengelakkan ini, anda boleh menambah proxy_set_header X-Forwarded-For $remote_addr; dahulu. Kemudian tambahkan tajuk permintaan pada permintaan Nuxt anda.

Dalam SSR Nuxt2 (menggunakan @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']);
    }
}

Dalam SSR Nuxt3, axios tidak diperlukan kerana klien HTTP rasmi disertakan, sila lihat penyelesaian di sini