“获取失败加载” - fetch在Postman中有效但在Chrome和Safari中失败

Question

更新：已修复。 看起来请求以503（应该）的形式返回，然后我的应用程序刷新并显示非错误消息：“Fetch failed loading”。 由于刷新，我只是没有看到响应。

---

我无法从本地托管的Create-React-App向我的Heroku托管节点服务器发送获取请求。

我的节点服务器已启用CORS。 如果我通过邮递员发出POST请求，我得到一个适当的响应（503，因为目前没有数据库连接，所以数据没有被保存。如果我应该发送回不同的响应，请告诉我）。 我的邮差请求有'application/json'作为内容类型，没有授权，以及{ "rating": "5", "zipcode": "0" }的正文。

但是，当我从我的React应用程序发出POST请求时，我在控制台中收到一条消息： “Fetch failed loading：OPTIONS” 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

使用'Content-Type'而不是'Content-type'。

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

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