firebase - Sec-Fetch-Mode 而不是 Preflight

Question

我创建了登录 FE 并完成了它。和往常一样，我的 ajax goto 是 Axios。我的代码如下。

const baseUrl = http://localhost:5000/project/us-central1/api

Axios.post(
 `${baseUrl}/v1/user/login`,
 { ...data },
 {
  headers: {
   Authorization: 'Basic auth...'
  }
 },
).then(r => console.log(r).catch(e =>console.log(e));

现在，当我尝试向我的本地 firebase 云函数发送请求时。我收到 400 错误请求。

检查请求后，我想知道为什么它没有发送任何预检请求，而它应该这样做(据我所知)，但我看到了一个名为 Sec-Fetch-Mode 的 header .我在任何地方搜索它有点抽象。而且我似乎无法弄清楚为什么我的请求仍然失败。

我的 axios 配置中是否缺少任何内容？ ？

我的 FE 在名为 live server(http://127.0.0.1:5500) 的 VSCode 插件 上运行

此外，我的 firebase 云功能已启用 cors

// cloud function expres app
cors({
 origin: true
})

任何见解都会非常有帮助。

Answer 1

OPTIONS实际上正在发送请求，因为您正在发送带有 Authorization 的跨源请求被认为是非简单的 header 。由于 Chrome 76 和 77 中的功能/错误，它不会显示在开发人员工具中。请参阅 Chrome not showing OPTIONS requests in Network tab获取更多信息。

预检请求是一种机制，如果服务器不知道 CORS(例如:旧的且未维护)，或者如果它明确想要拒绝，则允许在浏览器端拒绝跨域请求跨源请求(在这两种情况下，服务器都不会设置 Access-Control-Allow-Origin header )。 CORS 所做的可以在服务器端通过检查 Origin 来完成。 header ，但 CORS 实际上在浏览器级别保护用户。它甚至在发送之前就阻止不允许的跨域请求，从而减少网络流量、服务器负载，并防止旧服务器默认接收任何跨域请求。

另一方面，Sec-Fetch-Mode是 Fetch metadata headers 之一( Sec-Fetch-Dest 、 Sec-Fetch-Mode 、 Sec-Fetch-Site 和 Sec-Fetch-User )。这些 header 旨在通知服务器有关发送请求的上下文。基于这些额外的信息，服务器能够确定请求是否合法，或者干脆拒绝它。它们的存在是为了帮助 HTTP 服务器减轻某些类型的攻击，与 CORS 无关。

例如好老<img src="https://mybank.com/giveMoney?amount=9999999&to=evil@attacker.com">可以在服务器端检测到攻击，因为 Sec-Fetch-Dest将设置为 "image" (这只是一个简单的示例，暗示服务器使用 GET 方法公开端点，并使用不安全的 cookie 进行货币操作，这在现实生活中显然不是这种情况)。

总而言之，获取元数据 header 并不是为了取代预检请求而设计的，而是为了与它们共存，因为它们满足不同的需求。而 400 错误可能与这些无关，而是与不符合端点规范的请求有关。