Comment configurer Laravel CORS pour accepter les requêtes HTTP du proxy Nuxt 3 ?

Question

J'essaye de faire une demande client depuis Nuxt 3 发送到 api 路由，该路由通向 Laravel 中的身份验证控制器 mais elle renvoie :

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.

Demande envoyée par $fetch api pour Nuxt 3 :

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

Les demandes semblent arriver控制器之前就被停止了。这是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';
});

Il est configurable depuis le fichier Laravel 9.2 开始，似乎有一个 config/cors.php, mais je ne sais pas comment. La valeur par défaut ressemble à ceci :

<?php

return [

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

    'allowed_methods' => ['*'],

    'allowed_origins' => ['*'],

    'allowed_origins_patterns' => [],

    'allowed_headers' => ['*'],

    'exposed_headers' => [],

    'max_age' => 0,

    'supports_credentials' => false,

];

Une idée sur la façon d'autoriser api 请求 到 auth 路由 depuis Nuxt 3 ?

Answer 1

Pour les développeurs Laravel, démarrer votre parcours SSR Nuxt peut être très simple, surtout lorsque vous écrivez Laravel en utilisant Homestead

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

La configuration de Nginx peut être

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

Dans votre SSR Nuxt3

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

Après cela, vous pouvez gagner du temps avec CORS.

---

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

Dans SSR Nuxt, certaines requêtes sont envoyées depuis le serveur frontal et certaines requêtes sont envoyées depuis le navigateur client. Lorsqu'il provient du serveur frontal, il peut déclencher la limitation de Laravel avec sa propre adresse IP au lieu de l'adresse IP du client. Pour éviter cela, vous pouvez d'abord ajouter un proxy_set_header X-Forwarded-For $remote_addr;代码>. Ajoutez ensuite des en-têtes de requête à votre requête Nuxt.

Dans SSR Nuxt2 (en utilisant @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']);
    }
}

Dans SSR Nuxt3, axios n'est pas requis car le client HTTP officiel est inclus, veuillez consulter la solution ici