错误：使用 Fetch API 向第三方 API 发出 GET 请求时出现“TypeError：无法获取”

Posted 2023-03-04

【中文标题】错误：使用 Fetch API 向第三方 API 发出 GET 请求时出现“TypeError：无法获取”

【英文标题】：Error: "TypeError: Failed to fetch" while making a GETrequest to a third-party API using Fetch API

【发布时间】：2020-07-20 20:09:45

【问题描述】：

在这个问题上进行了如此多的研究和花费数小时后，我正要问 我正在调用第三方 Infutor API。我在我的 ReactJS 项目中使用 fetch API。首先它开始给我CORS错误，然后我在选项中添加了mode: 'no-cors'，然后它开始给我Error: "TypeError: Failed to fetch"。

以下是我的确切代码：

const response = await fetch(`$INFUTOR_API_URL?$infutorParams`, 
    method: 'GET',
    mode: 'no-cors', 
    credentials: 'include',
  )
    .then(response => 
      return response.json();
    )
    .catch(error => console.error(error));

我找到了现有的答案，例如

Uncaught (in promise) TypeError: Failed to fetch and Cors error Catching "Failed to load resource" when using the Fetch API 及其他相关答案

在网上搜索了相关答案后，我也尝试在其中添加credentials: 'include'，然后我也尝试使用mode: 'cors'提出get请求并尝试了很多解决方案，但没有成功。它只是不从 GET 请求中获取数据。

我在 POSTMAN 上得到响应，即使在新的 chrome 选项卡中复制粘贴带有参数的 url 也会返回响应。

【问题讨论】：

你试过用chrome开发者工具调试请求吗？我认为“网络”标签在这种情况下可能很有用。

@FrancescoManicardi 是的，我也试图从网络选项卡中找出这个问题，它变成红色，表示无法加载响应。并且没有其他信息。

【参考方案1】：

这听起来像是在服务器端未正确设置 CORS 标头：Access-Control-Allow-Origin。

如果设置正确，则根本不需要no-cors 标志。 设置不正确，无论如何您都无法访问内容。

【讨论】：

当您使用 Postman 并查询端点时，您是否在响应中看到 Access-Control-Allow-Origin 标头？价值是什么？您是否看到任何其他可能限制您的用例的可疑 Acces-Control- 标头？

在邮递员中我没有得到任何 Access-Contorl 标头作为响应，这到底意味着什么？

这意味着服务器不支持来自浏览器中其他来源的请求。 developer.mozilla.org/en-US/docs/Web/HTTP/Headers/… 您可以要求 API 所有者为您提供这些标头，或者您必须使用代理来查询您想要的资源（这是一个阴暗的解决方案）。

@ShahjahanKhokar 如果这回答了您的问题，请选择我的帖子作为答案

其实不，我不知道从 reactjs 前端做这件事，所以我在我自己的 Node API 中移动了这个功能，并通过 fetch api 在 Node 中执行调用，效果很好，我无法弄清楚为什么这在 reactJs 中不起作用我正在编写相同的代码来从这个第三方 api 中获取。 const res = await fetch(URL);