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的配置中是否缺少任何Im？

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

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

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

任何见解都会很有帮助。

Answer 1

在您的情况下，由于#parent > div:nth-child(1)方法被认为是一种“简单”方法（W3C specification），因此未发送OPTIONS请求

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

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

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

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

Answer 2

您在点差运算符上缺少点，这是正确的语法：

{...数据}

请注意“数据”之前的三个点。

请在此处查看对对象使用传播运算符的情况：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

安全模式而不是预检

2 个答案: