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

Question

我将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,]

Answer 1

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

如果可能，请使用禁用CSRF保护的路由组。否则，您可以针对AppHttpMiddlewareVerifyCsrfToken:中的某些请求禁用CSRF

protected $except = [
 'api/*'
]

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

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

protected $middleware = [
 FruitcakeCorsHandleCors::class,
];