无法使用 fetch API 获取数据

Question

我无法让 fetch() API 工作。我强烈地感觉到我做错了什么。

\n\n

我有一个在 PORT 3005 上运行的简单 Express 服务器，它以 json 格式返回数据，还有一个在 PORT 3000 上运行的 React.js 客户端。

\n\n

我正在向fetch()发出 GET 请求，http://localhost:3005/api但在控制台上收到这些消息

\n\n

\n

跨源请求被阻止：同源策略不允许读取位于http://localhost:3005/api 的远程资源处的远程资源。\n（原因：CORS 标头 \xe2\x80\x98Access-Control-Allow-Origin\xe2\ x80\x99 缺失）。

\n\n

类型错误：尝试获取资源时出现网络错误。

\n

\n\n

我添加了一个标题并阅读了类似的问题，但我仍然无法让它工作，而且我仍然收到相同的消息。

\n\n

我究竟做错了什么？（这是代码）

\n\n

let url = \'http://localhost:3005/api\';\n    fetch(url, { \n      method: \'GET\',\n      headers:{\n        \'Access-Control-Allow-Origin\': \'*\',\n        \'Access-Control-Allow-Credentials\':true,\n        \'Access-Control-Allow-Methods\':\'POST, GET\'\n      }\n    }).then(response => response.json)\n    .then(data => console.log(data))\n

\n\n

我过去多次遇到过这个问题，通常只使用 axios。但这一次，我想要得到fetch()上班……！

\n

Answer 1

您的服务器端点需要支持 Access-Control-Allow-Origin 标头，而不仅仅是客户端。

一般流程是：

1. 客户端正在执行飞行前请求，以检查服务器是否支持所请求的 cors 策略。

2. 服务器接收预检信息，并在认为请求被允许时使用正确的标头进行应答。

3. 客户端收到答案并通过包含的标头知道是否允许实际请求。

4. （在您的情况下）当服务器未返回标头时，浏览器将不允许实际调用并给出您遇到的错误。

因此，为了解决这个问题，您需要修改服务器代码以返回预检请求的正确标头。

另请参阅此 stackoverflow答案。

请参阅此链接。具体请查看有关预检请求的部分。