Sec-Fetch-Mode 和阻止 CORS

Question

因此，我有相同的网站从不同的网络和计算机在 (1) Chrome 76 和 (2) Chrome 77 上向同一服务器发出相同的请求。

一个请求有 (1)

Sec-Fetch-Mode: no-cors, Sec-Fetch-Site: cross-site

，另一个请求有 (2)

Sec-Fetch-Mode: cors, Sec-Fetch-Site: same-site

。 带有

no-cors

的失败，会在启用 CORS 的情况下向 C# Web API 端点发出 400 请求（多年来，各种设备上有数千个不同的用户）。

发生什么事了？有传言称 Chrome bug 不会在飞行前发送该标头，但它确实存在并设置为

no-cors

。

Chrome 中的安全设置或错误？可修复服务器端还是前端？

这是由 XMLHttpRequest 发送的，而不是新的 Fetch-API。

Answer 1

Sec-Fetch-Mode 和阻塞 CORS [解决方案]

原始问题：Sec-Fetch-Mode 和阻塞的 CORS

---

您在

Sec-Fetch-Mode

标头和 CORS（跨源资源共享）方面遇到的问题可以通过了解这些机制的工作原理来解释。

Sec-Fetch-Mode

标头是 Fetch API 规范的一部分，用于指示请求的预期模式。它可以具有

cors

、

no-cors

、

same-origin

或

navigate

等值。

Sec-Fetch-Site

标头指示请求的站点类型，可以是

same-origin

或

cross-site

。

在您的情况下，根据 CORS 规范，带有

Sec-Fetch-Mode: no-cors

和

Sec-Fetch-Site: cross-site

的请求被视为“简单请求”。简单请求是指满足某些条件的请求，例如仅使用某些 HTTP 方法（GET、HEAD、POST），不包含某些标头（例如除

Content-Type

、

application/x-www-form-urlencoded

或

multipart/form-data

之外的

text/plain

），以及没有某些类型的请求正文（例如

Blob

或

FormData

）。

发出简单请求时，浏览器会将实际请求发送到服务器，而不需要预检请求。服务器需要使用适当的 CORS 标头（

Access-Control-Allow-Origin

、

Access-Control-Allow-Methods

等）进行响应，以允许来自不同来源的请求。

另一方面，带有

Sec-Fetch-Mode: cors

和

Sec-Fetch-Site: same-site

的请求被视为“跨源请求”，将触发预检请求。预检请求是浏览器向服务器发送的附加 HTTP OPTIONS 请求，用于检查实际请求是否被允许。服务器需要使用适当的 CORS 标头响应预检请求，以允许实际请求。

现在，谈谈您面临的问题。如果带有

Sec-Fetch-Mode: no-cors

的请求失败并出现 400 错误，则表明服务器在没有预检的情况下无法正确处理该请求。服务器应该能够正确处理简单请求和预检请求，具体取决于请求标头。

要解决此问题，您可以尝试以下操作：

1. 确保服务器已正确配置以处理 CORS 请求。这包括在响应中设置适当的 CORS 标头，例如

   Access-Control-Allow-Origin

   、

   Access-Control-Allow-Methods

   、

   Access-Control-Allow-Headers

   等。服务器应使用这些标头来响应简单请求和预检请求。

2. 检查是否有任何服务器端安全设置或中间件可能会在没有预检的情况下阻止请求。检查服务器端代码和配置，以确保它允许请求而无需预检。

3. 验证客户端代码是否正确设置

   Sec-Fetch-Mode

   和

   Sec-Fetch-Site

   标头。确保请求按预期发送。

4. 考虑将 Chrome 更新到最新版本，因为可能存在浏览器特定的错误或已在新版本中修复的问题。

总而言之，您面临的问题可能是由于服务器在没有预检的情况下无法正确处理请求。检查并更新服务器端代码和配置，以确保其正确处理简单请求和预检请求。