CORS-Richtlinie: Antwort auf Preflight-Anfrage schlägt bei der Zugriffskontrollprüfung fehl: Der Header „Access-Control-Allow-Origin“ fehlt in der Anfrage

Question

Also habe ich versucht, ein wenig mit dem Frontend und Backend herumzuspielen. Beim Versuch, Daten vom Frontend an den Server zu senden, erhalte ich

Der Zugriff auf XMLHttpRequest unter „http://test.localhost/login“ vom Ursprung „http://localhost:3000“ wurde durch die CORS-Richtlinie blockiert: Antwort auf Preflight-Anfrage fehlgeschlagen. Zugriffskontrollprüfung: Keine „Zugriffskontrolle“ – Der Header „Allow-Origin“ ist auf der angeforderten Ressource vorhanden

Hier sind meine Axios onClick-Einstellungen:

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

Mein axiosClient ist:

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;

Meine CORS-Konfiguration im Backend ist

<?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

您是否尝试过像这样将本地主机 IP 包含在 cors.php 中？

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

如果这不起作用，请尝试使用此配置

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

并在 Kernel.php 中注释此行，但请注意此配置将接受来自任何地方的请求，因此在部署之前确保您的后端接收来自您首选允许来源的请求。

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