首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 >无法用fetch API获取数据

无法用fetch API获取数据
EN

Stack Overflow用户
提问于 2018-02-09 19:38:59
回答 1查看 9.2K关注 0票数 2

我无法让fetch() API工作。我有种强烈的感觉,我做的事情不对。

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

我使用fetch()http://localhost:3005/api发出GET请求,但在控制台上获取这些消息

跨源请求被阻止:相同的原产地策略不允许在http://localhost:3005/api上读取远程资源。(原因: CORS标题“访问-控制-允许-起源”丢失)。 TypeError:尝试获取资源时的NetworkError。

我添加了一个标题,并阅读了类似的问题,但我仍然无法使它工作,我仍然收到相同的信息。

我做错了什么?(这是代码)

代码语言:javascript
运行
复制
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()开始工作.!

EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2018-02-09 19:42:08

您的服务器端点需要支持访问控制-允许-原产地头,而不仅仅是客户端.

一般的流程是:

  1. 客户端正在执行飞行前请求,以检查服务器是否支持请求的cors策略。
  2. 当服务器认为请求被允许时,服务器将接收到飞行前的信息,并使用正确的报头进行应答。
  3. 客户端接收到答案,并通过包含的标头知道是否允许实际请求。
  4. (在您的情况下)当服务器没有返回标头时,浏览器将不允许实际调用并给出您正在经历的错误。

因此,为了解决这个问题,您需要修改服务器代码,以返回正确的飞行前请求头。

还可以看到这个堆栈溢出回答

看这个链接。特别是查看有关飞行前请求的部分。

票数 5
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/48712977

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档