无法使用 fetch API 获取数据

Question

我无法让 fetch() API 工作。我有一种强烈的感觉，我做错了什么。

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

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

跨域请求被阻止：同源策略不允许读取 http://localhost:3005/api 的远程资源。 （原因：CORS 标头“Access-Control-Allow-Origin”缺失）。

TypeError：尝试获取资源时出现 NetworkError。

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

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

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

我过去曾多次遇到此问题，通常只使用 axios。但这一次，我想让fetch()工作......！

Answer 1

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

一般流程是：

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

2. 服务器接收到 pre-flight 并在认为请求允许时以正确的标头进行应答。

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

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

因此，为了解决它，您需要修改服务器代码以为预检请求返回正确的 Header。

另请参阅此 stackoverflow answer。

看到这个link。具体看一下 Preflight Requests 部分。