请求标头中的 Sec-Fetch-Mode、Sec-Fetch-Dest、Sec-Fetch-Site 创建 CORS 问题

Posted 2023-03-04

【中文标题】请求标头中的 Sec-Fetch-Mode、Sec-Fetch-Dest、Sec-Fetch-Site 创建 CORS 问题

【英文标题】：Sec-Fetch-Mode, Sec-Fetch-Dest, Sec-Fetch-Site in request header creating CORS issue

【发布时间】：2021-05-28 21:36:32

【问题描述】：

在我使用 axios 从我的网站请求的后端端点上，大多数浏览器没有在请求标头上设置“sec-fetch-mode”和“sec-fetch-site”，它们似乎工作正常. 但是，很少有浏览器设置标题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')

有没有办法从代码中控制这些标头，无论是从前端还是从后端？

【参考方案1】：

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