nginx 将multipart/form-data添加到请求标头时出现CORS错误

arknldoa 于 2023-08-03 发布在 Nginx

关注(0)|答案(2)|浏览(288)

我在前端使用ReactJs，在后端使用Laravel，并使用nginx作为Web服务器。当我添加multipart/form-data到axios post请求时，我得到cors错误：这个项目是码头化的，这是值得考虑的。后端端口为8090，前端端口为8080。

const result = await axios(`${backendUrl}/shops`, {
  headers: {
      'Content-Type': `multipart/form-data; `,
      "Accept": "*/*",
      "Access-Control-Allow-Origin": "*"
  },
      method: "post",
      data: {
          values
      },
      withCredentials: true,
    });

字符串
我试图在larevl核心配置文件中禁用cors策略。这是我的Laravel cors配置文件：

'paths' => ['*'],
'allowed_methods' => ['*'],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => ['*'],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,

型
我在nginx配置文件中添加了client_max_body_size，但错误没有得到解决。

nginx

来源：https://stackoverflow.com/questions/76631739/cors-error-when-multipart-form-data-was-added-to-request-header

2条答案

按热度按时间

bwitn5fc1#

首先，您应该从axios请求中删除Access-Control-Allow-Origin头，因为它是服务器端的响应头。
其次，由于您使用的是凭证请求，因此后端无法使用Access-Control-Allow-Origin: *进行响应
对于没有凭据的请求，可以将文字值“*”指定为通配符;该值告诉浏览器允许来自任何源的请求代码访问资源。尝试对凭据使用通配符将导致错误。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin#directives
https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS/Errors/CORSNotSupportingCredentials
下面是如何验证后端是否正确配置为处理凭证CORS请求（您需要将http://localhost:3000替换为前端源，并将http://localhost:3100/api/test替换为后端API端点）。
1.验证OPTIONS响应中是否存在访问控制标头：

curl -v -X OPTIONS -H "Origin: http://localhost:3000" http://localhost:3100/api/test
*   Trying 127.0.0.1:3100...
* Connected to localhost (127.0.0.1) port 3100 (#0)
> OPTIONS /api/test HTTP/1.1
> Host: localhost:3100
> User-Agent: curl/7.88.1
> Accept: */*
> Origin: http://localhost:3000
> 
< HTTP/1.1 200 OK
< vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Origin
< access-control-allow-credentials: true
< access-control-allow-methods: POST
< access-control-allow-origin: http://localhost:3000
< access-control-max-age: 300
< date: Fri, 07 Jul 2023 13:13:13 GMT
< connection: close
< transfer-encoding: chunked
< 
* Closing connection 0

字符串

access-control-allow-credentials: true-此头必须存在于响应中
access-control-allow-methods: POST-此标头必须存在且必须包含POST
access-control-allow-origin: http://localhost:3000-此头必须存在，并且必须包含您的前端来源
access-control-max-age: 300-这个头是可选的;你可以在开发环境中将max-age设置得合理的短一些
vary: Origin-建议使用此头

1.验证POST响应中是否存在访问控制标头：

curl -v -F param=value -H "Origin: http://localhost:3000" http://localhost:3100/api/test
*   Trying 127.0.0.1:3100...
* Connected to localhost (127.0.0.1) port 3100 (#0)
> POST /api/test HTTP/1.1
> Host: localhost:3100
> User-Agent: curl/7.88.1
> Accept: */*
> Origin: http://localhost:3000
> Content-Length: 145
> Content-Type: multipart/form-data; boundary=------------------------6a23bcb7ccaed2ec
> 
* We are completely uploaded and fine
< HTTP/1.1 200 OK
< vary: RSC, Next-Router-State-Tree, Next-Router-Prefetch, Origin, Accept-Encoding
< access-control-allow-credentials: true
< access-control-allow-methods: POST
< access-control-allow-origin: http://localhost:3000
< access-control-max-age: 300
< content-type: application/json
< date: Fri, 07 Jul 2023 13:19:47 GMT
< connection: close
< transfer-encoding: chunked
< 
* Closing connection 0

型
作为最低要求，POST响应必须包含Access-Control-Allow-Origin和Access-Control-Allow-Credentials头，但包含与OPTIONS响应相同的访问控制头也没有什么坏处。
请让我知道这是否解决了你的问题。如果问题没有消失，请发布具体的CORS错误。

赞(0）回复(0）举报 2023-08-03

kqlmhetl2#

这个问题已经通过请求的微小变化得到解决。我将方法类型从请求体移动到请求的第一行，并将值附加到formData，并将其作为请求的第二个参数发送，并将边界添加到请求头：

const result = await axios.post(`${backendUrl}/shops`, formData, {
                    headers: {
                        'Content-Type': `multipart/form-data; boundary=${formData._boundary}`,
                    },
                    withCredentials: true,
                });

字符串

赞(0）回复(0）举报 2023-08-03

我来回答

nginx 将multipart/form-data添加到请求标头时出现CORS错误

2条答案

相关问题

热门标签

最新问答