“Fetch failed loading” - fetch 在 Postman 中有效，但在 Chrome 和 Safari 中失败答案

【问题标题】："Fetch failed loading" - fetch works in Postman but fails in Chrome & Safari“Fetch failed loading” - fetch 在 Postman 中有效，但在 Chrome 和 Safari 中失败
【发布时间】：2018-02-21 09:28:47
【问题描述】：

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

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

我的节点服务器启用了 CORS。如果我通过 Postman 发出 POST 请求，我会得到适当的响应（503，因为目前没有连接数据库，所以没有保存数据。如果我应该发回不同的响应，请告诉我）。我的 Postman 请求的内容类型为 '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));

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

【问题讨论】：

您能否从您的代码中添加更多内容并尝试在then 之后添加catch 到fetch。也许更详细的错误可以显示出问题所在。
当您从本地向本地发出请求时，它不会检查 CORS，当您向邮递员发出请求时，它会立即发出给定的动词（发布、放置、删除、获取...）。当您从一个域到另一个域（heroku 本地）并从浏览器执行此操作时，在动词浏览器发出选项请求以检查允许哪些标头和其他事情之前...

标签： node.js reactjs heroku fetch create-react-app

【解决方案1】：

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

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，否则将不会发送它并且请求将失败。更多关于这在上面的链接。

【讨论】：