安全模式而不是预检

Question

我创建了登录FE，并完成了它。和往常一样，我对Ajax的追求是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。我搜索了一些抽象的地方。而且我似乎无法弄清楚为什么我的请求仍然失败。

我的配置中缺少什么axios吗？

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

另外，我的Firebase Cloud功能已启用 cors

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

任何见解将非常有帮助。

Answer 1

在您的情况下，OPTIONS由于该POST方法被视为“简单”方法（W3C规范），因此未发送请求

预检请求是一种机制，如果服务器不支持CORS（例如，旧的且未维护），或者如果服务器明确希望拒绝跨域请求（在两种情况下，服务器均不支持CORS），则该机制允许在浏览器端拒绝跨域请求服务器不会设置Access-Control-Allow-Origin标题）。通过在服务器端检查Origin标头，可以完成CORS的工作，但是CORS实际上有助于甚至在发送不必要的跨域请求之前对其进行过滤，从而减少了网络流量和服务器负载，并防止了旧服务器接收任何跨域请求-origin请求默认情况下。

在另一方面，Sec-Fetch-Mode是中的一个取元数据报头（Sec-Fetch-Dest，Sec-Fetch-Mode，Sec-Fetch-Site和Sec-Fetch-User）。这些标头用于通知服务器有关已发送请求的上下文的信息。然后，基于此额外信息，服务器可以确定该请求看起来合法还是拒绝该请求。它们的存在是为了帮助HTTP服务器减轻某些类型的攻击，并且与CORS无关。

例如，<img src="https://mybank.com/giveMoney?to=evil@attacker.com">由于Sec-Fetch-Dest将设置为，因此可以在服务器端检测到良好的旧攻击"image"（这只是一个简单的示例，这意味着服务器使用GET货币操作方法公开端点，这在现实生活中显然不是这种情况）。

结论是，获取元数据标头并非旨在替代预检请求，而是与它们共存，因为它们满足了不同的需求。400错误可能与这些错误无关，而是与不符合端点规范的请求有关。