无法使用 fetch API 获取数据

Posted 2023-03-04

技术标签:

【中文标题】无法使用 fetch API 获取数据【英文标题】：Can't fetch data with fetch API 【发布时间】：2018-07-20 15:29:51 【问题描述】：

我无法让 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()工作......！

【问题讨论】：

这些标头应该从服务器发送到客户端，而不是从客户端发送到服务器。 【参考方案1】：

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

一般流程是：

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

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

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

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

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

另请参阅此 *** answer。

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