node.js - "Fetch failed loading"- 提取在 Postman 中有效，但在 Chrome 和 Safari 中失败

Question

更新:已修复。看起来请求以 503 返回(应该如此)，然后我的应用程序刷新并显示非错误消息:“获取加载失败”。我只是因为刷新而没有看到响应。

---

我无法从本地托管的 Create-React-App 向 Heroku 托管的 Node 服务器发出提取请求。

我的 Node 服务器启用了 CORS。如果我通过 Postman 发出 POST 请求，我会得到一个适当的响应(503，因为目前没有连接数据库，所以数据没有被保存。如果我应该发回不同的响应，请告诉我)。我的 Postman 请求的内容类型为 'application/json'，没有授权，主体为 { "rating": "5", "zipcode": "0"} .

但是，当我从我的 React 应用发出 POST 请求时，我在我的控制台中收到一条消息:“加载失败:选项”https://shielded-gorge-69158.herokuapp.com/feedback "." 没有关联的错误，只有消息。我的网络面板中没有关于请求的信息。

当我在本地执行提取请求时，从 localhost:3000(我的应用程序)到 localhost:5000(我的服务器)。只有当我尝试向托管在 Heroku 上的(否则相同的)服务器发出请求时，它才会失败。

这是获取请求的样子:

return fetch('https://shielded-gorge-69158.herokuapp.com/feedback', {
  method: 'POST',
  headers: {
    'Content-type': 'application/json'
  },
  body: JSON.stringify({ rating: userRating, zipcode: userZip })
}).then(res => {
if (!res.ok) {
  throw new Error('Error:', res.statusText);
}
  return res;
}).catch(err => console.error(err));

编辑:我正在继续研究， postman 似乎不应该/不发出预检请求(https://github.com/postmanlabs/postman-app-support/issues/2845)。所以也许这就是问题所在——但为什么请求在我的服务器在本地时有效，而在托管在 Heroku 上时却无效？

Answer 1

使用“内容类型”而不是“内容类型”。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Simple_requests https://fetch.spec.whatwg.org/#cors-safelisted-request-header

说明:当您使用不正确的大小写时，它会被视为自定义 header ，因此在这种情况下会发送预检请求。现在，如果 OPTIONS 请求是在具有正确 cors 规范的服务器上实现的，那么将发送下一个 POST，否则将不会发送并且请求将失败。在上面的链接中有更多相关信息。