Stratégie CORS : la réponse à la demande de contrôle en amont échoue au contrôle du contrôle d'accès : l'en-tête « Access-Control-Allow-Origin » est manquant dans la demande

Question

J'ai donc essayé de jouer un peu avec le frontend et le backend. Lorsque j'essaie d'envoyer des données du frontend au serveur, j'obtiens

L'accès à XMLHttpRequest sur 'http://test.localhost/login' depuis l'origine 'http://localhost:3000' a été bloqué par la politique CORS : la réponse à la demande de contrôle en amont a échoué. Vérification du contrôle d'accès : aucun 'Access-Control' - L'en-tête Allow-Origin' est présent sur la ressource demandée

Voici mes paramètres axios onClick :

export const login = (email, password) => {
  return axiosClient.post('/login', { email, password })
    .then(response => {
      // handle successful login
      return response.data;
    })
    .catch(error => {
      // handle failed login
      throw error;
    });
};

Mon axiosClient est :

import axios from "axios";
const axiosClient = axios.create({
  baseURL: process.env.REACT_APP_API_URL, (my localhost)
  headers: {
    'Content-Type': 'application/json',
    Accept: 'application/json',
  },
});
export default axiosClient;

Ma configuration cors sur le backend est

<?php

namespace App\Http\Middleware;

use Closure;
use Illuminate\Http\Request;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure(\Illuminate\Http\Request): (\Illuminate\Http\Response|\Illuminate\Http\RedirectResponse)  $next
     * @return \Illuminate\Http\Response|\Illuminate\Http\RedirectResponse
     */
    public function handle($request, Closure $next)
    {
        $headers = [
            'Access-Control-Allow-Origin' => 'http://localhost:3000',
            'Access-Control-Allow-Methods' => 'GET, POST, PUT, DELETE, OPTIONS',
            'Access-Control-Allow-Headers' => 'Content-Type, Authorization',
        ];

        if ($request->isMethod('OPTIONS')) {
            return response()->json([], 200, $headers);
        }

        $response = $next($request);

        foreach ($headers as $key => $value) {
            $response->header($key, $value);
        }

        return $response;
    }
}

Answer 1

Avez-vous essayé d'inclure l'adresse IP localhost dans cors.php comme ceci ?

'allowed_origins' => ["http://localhost:3000"]

Si cela ne fonctionne pas, essayez d'utiliser cette configuration

'paths' => ['api/*', 'sanctum/csrf-cookie'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => ["*"],
'allowed_headers' => ['*'],
'exposed_headers' => ["*"],
'max_age' => 0,
'supports_credentials' => false,

Et commentez cette ligne dans Kernel.php, mais veuillez noter que cette configuration acceptera les requêtes de n'importe où, alors assurez-vous que votre backend reçoit les requêtes de vos sources autorisées préférées avant le déploiement.

\Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class