反应应用程序中的CORS问题，无法上传图像

Posted 2023-03-04

【中文标题】反应应用程序中的CORS问题，无法上传图像

【英文标题】：CORS issue in react app, can't upload images

【发布时间】：2020-11-11 18:43:18

【问题描述】：

我将 laravel 用于 api，将 react js 用于前端。但是每当我尝试将图像上传到服务器时，都会遇到 CORS 问题。

'api-url 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.'

有时有效，但有时无效。有没有永久的解决办法？

我正在为 cors 使用以下插件。 https://github.com/fruitcake/laravel-cors

cors.php

return[
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,]

【问题讨论】：

这很大程度上取决于后端服务器的配置。你可以访问它吗？

你在后台配置CORS了吗？

我可以访问服务器。我应该改变什么才能让它工作？

您需要在服务器上定义CORS 策略。 wiki

@NazmulHasan 现在哪个请求有效，哪个无效？

【参考方案1】：

截至文档中，您的代码中缺少以下内容：

如果可能，请使用禁用 CSRF 保护的路由组。否则你可以为App\Http\Middleware\VerifyCsrfToken中的某些请求禁用CSRF：

protected $except = [
 'api/*'
]

更重要的是，您应该将 CORS 中间件移动到数组的顶部

要允许所有路由使用 CORS，请在 app/Http/Kernel.php 类的 $middleware 属性顶部添加 HandleCors 中间件：

protected $middleware = [
 \Fruitcake\Cors\HandleCors::class,
];