CORS 问题：Laravel 10 API 请求中不存在“Access-Control-Allow-Origin”标头

Question

当我尝试从 React 应用程序向 Laravel API 发出 GET 请求时，我遇到了 CORS（跨域资源共享）问题。我在控制台中收到的具体错误如下：

从源“http://localhost:19000”访问“https://0748-102-146-2-29.ngrok-free.app/api/products-api”处的 XMLHttpRequest 已被 CORS 策略阻止：否请求的资源上存在“Access-Control-Allow-Origin”标头。

以下是我的设置的相关详细信息：Laravel API 配置（config/cors.php）：

return [
'paths' => ['api/*', 'http://localhost:19000', 'sanctum/csrf-cookie'],
'allowed_methods' => ['GET', 'POST', 'PUT', 'DELETE'], // Add other methods as needed
'allowed_origins' => ['*'],
'allowed_headers' => ['*'],
// ...
];

React 应用程序（useProductFetch.js）：

import { useState, useEffect } from "react";
import axios from "axios";

const fetchData = async () => {
setIsLoading(true);

try {
  const response = await axios.get(
    "https://0748-102-146-2-29.ngrok- 
    free.app/api/products-api"
  );
  console.log("Axios request successful");

export default useProductFetch;

Postman 请求：当我使用 Postman 向 API 端点https://0748-102-146-2-29.ngrok-free.app/api/products-api发送 GET 请求时，我收到了预期的响应：

{
"data": [
    // ...
]

}

问题：尽管在 Laravel API 上配置 CORS 以允许所有来源和方法，但在从 React 应用程序发出请求时，我仍然面临 CORS 问题。我还验证了通过 Postman 直接访问时服务器返回了预期的响应。像这样“https://0748-102-146-2-29.ngrok-free.app/api/products-api”

问题：尽管我的 Laravel API 上有正确的 CORS 配置，但什么可能导致此 CORS 问题？我是否需要考虑其他事项或应采取任何其他步骤来确保我的 React 应用程序可以成功向 API 发出请求？任何见解或解决方案将不胜感激。谢谢你！

Answer 1

我在做自己的许多项目时也面临着同样的问题。您必须创建一个中间件来解决这个问题。下面的代码是我一直在使用的中间件。我已在其中添加了您的本地主机 URL。

<?php

namespace App\Http\Middleware;

use Closure;

class Cors
{
    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {
        $response = $next($request);
        $response->headers->set('Access-Control-Allow-Origin' , 'http://localhost:19000');
        $response->headers->set('Access-Control-Allow-Methods', 'POST, GET, OPTIONS, PUT, DELETE');
        $response->headers->set('Access-Control-Allow-Headers', 'Content-Type, Accept, Authorization, X-Requested-With, Application');
        return $response;
    }
}

创建中间件后，您必须在$routeMiddleware数组下的app/Http/Kernel.php文件中定义中间件，如下所示：

protected $routeMiddleware = [
        ...(Any previous middlewares)       

        'cors' => \App\Http\Middleware\Cors::class,

    ];

完成此操作后，您可以在 API 路由组或您创建的任何单独路由中使用它。例如：

Route::middleware(['cors'])->prefix('auth')->group(function () {
    Route::post('register', [AuthController::class, 'register']);
});

确保运行php artisan config:clear命令只是为了确保您的应用程序没有任何缓存的配置。

希望这可以帮助。