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标头，而不仅仅是客户端。

一般流程是：

客户端正在执行飞行前请求，以检查服务器是否支持所请求的cors策略。
当服务器认为允许请求时，服务器会接收到飞行前并使用正确的标题回答。
客户端收到答案，并且包含的标题知道是否允许实际请求。
（在您的情况下）当服务器未返回标题时，浏览器将不允许实际调用并提供您遇到的错误。

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

另请参阅此stackoverflow answer。

见link。具体来看一下有关预检请求的部分。

无法使用获取API

1 个答案: