React调用Laravel 8 API提交数据时遭遇CORS策略问题求助

核心原因 #

浏览器的CORS策略对非简单请求（比如携带multipart/form-data的POST）会发送预检OPTIONS请求，而你的Laravel API未正确处理该请求，或者CORS配置未覆盖这类请求规则。VSCode Rest Client不属于浏览器环境，不受CORS策略限制，因此能正常请求。

解决方案步骤 #

1. 检查并更新Laravel的CORS配置 #

打开项目根目录下的config/cors.php，确保配置覆盖你的API路由与请求规则：

return [
    'paths' => ['api/*'], // 匹配你的API路由前缀
    'allowed_methods' => ['*'], // 允许所有请求方法（含POST、OPTIONS）
    'allowed_origins' => ['http://localhost:3000'], // 允许你的React应用域名
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'], // 允许所有请求头，适配FormData的Content-Type
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

2. 确保CORS中间件应用到API路由 #

打开app/Http/Kernel.php，确认api中间件组包含HandleCors中间件：

protected $middlewareGroups = [
    'web' => [
        // ... 其他中间件
    ],

    'api' => [
        \Laravel\Sanctum\Http\Middleware\EnsureFrontendRequestsAreStateful::class,
        'throttle:api',
        \Illuminate\Routing\Middleware\SubstituteBindings::class,
        \Illuminate\Http\Middleware\HandleCors::class, // 确保此行存在
    ],
];

3. 清理缓存并重启服务 #

执行命令刷新配置缓存，确保新配置生效：

php artisan config:cache
php artisan serve

4. React端Axios配置校验（可选） #

若上述配置后仍有问题，确保Axios配置与Laravel的CORS规则一致：

try {
   const response = await axios.post(
       "http://localhost:8000/api/esi/survey/store",
       formData,
       { withCredentials: false } // 与Laravel的supports_credentials保持一致
   );
   console.log(response);
} catch(e) {
   console.error(e);
}

补充说明：GET请求正常的原因 #

GET属于简单请求，浏览器不会发送预检OPTIONS请求，仅在响应头检查Access-Control-Allow-Origin即可；而携带multipart/form-data的POST属于非简单请求，必须先通过OPTIONS预检请求的验证，才会发送实际的POST请求。

内容的提问来源于stack exchange，提问作者Rido