Question

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

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

我的节点服务器已启用CORS。如果我通过邮递员发出POST请求，我得到一个适当的响应（503，因为目前没有数据库连接，所以数据没有被保存。如果我应该发送回不同的响应，请告诉我）。我的邮递员请求有'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

使用'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，否则它将不会被发送并且请求将失败。以上链接中有更多内容。

“获取失败加载” - fetch在Postman中有效，但在Chrome＆amp;苹果浏览器

1 个答案: