Sec-Fetch-Mode、Sec-Fetch-Dest、Sec-Fetch-Site 在请求 header 中创建 CORS 问题

Question

在我使用 axios 从我的网站请求的后端端点上，大多数浏览器没有在请求中设置“sec-fetch-mode”和“sec-fetch-site”headers而且它们似乎工作正常。
但是，很少有浏览器设置 headers sec-fetch-mode:cors、sec-fetch-dest: empty 和 sec-fetch-site:same-site，在这种情况下连接会关闭，浏览器控制台会显示以下错误。

Access to XMLHttpRequest at 'https://site-url.xyz/endpoint1' from origin 
'https://xxx.site-url.xyz' has been blocked by CORS policy: No 
'Access-Control-Allow-Origin' header is present on the requested resource.

后台配置如下：

    response.headers.add('Access-Control-Allow-Origin', "*")
    response.headers.add('Access-Control-Allow-Headers', 'Content-Type, Authorization')
    response.headers.add('Access-Control-Allow-Methods', 'GET,PUT,POST,OPTIONS')
    response.headers.add('Strict-Transport-Security', 'max-age=31536000; includeSubDomains')

有没有一种方法可以从代码 front-end 或后端控制这些 headers？

Answer 1

所以问题出在后端的 Nginx 配置上。默认情况下它只能接受 1MB 的最大文件大小。所以有些人能够上传文档，有些则不能。我在控制台上看到 CORS 问题很奇怪。

Sec-Fetch-Mode、Sec-Fetch-Dest、Sec-Fetch-Site 在请求 header 中创建 CORS 问题

Sec-Fetch-Mode, Sec-Fetch-Dest, Sec-Fetch-Site in request header creating CORS issue

http

cors

axios

sec-fetch-site

sec-fetch-mode