23

我创建了登录 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. 我搜索了任何有点抽象的地方。而且我似乎无法弄清楚为什么我的请求仍然失败。

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

我的FE运行在一个名为live server(http://127.0.0.1:5500)

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

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

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

4

2 回答 2

55

该OPTIONS请求实际上正在发送，因为您发送的跨域请求的Authorization标头被认为是不简单的。由于 Chrome 76 和 77 中的功能/错误，它不会显示在开发人员工具中。有关更多信息，请参阅Chrome 未在网络选项卡中显示 OPTIONS 请求。

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

另一方面，是Sec-Fetch-ModeFetch元数据标头之一（Sec-Fetch-Dest、Sec-Fetch-Mode和）。这些标头旨在通知服务器有关发送请求的上下文。基于这些额外信息，服务器可以确定请求是否合法，或者直接拒绝。它们的存在是为了帮助 HTTP 服务器减轻某些类型的攻击，并且与 CORS 无关。Sec-Fetch-SiteSec-Fetch-User

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

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

于 2019-08-27T17:22:55.447 回答
-1

您在扩展运算符上缺少一个点，这是正确的语法：

{ ...数据 }

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

请在此处查看对对象使用扩展运算符：

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

于 2019-08-27T21:59:43.743 回答