Javascript Fetch - 如何修复 Failed to Fetch 错误（可能是由于在 HTTPS 站点上发出 HTTP 请求？）

Question

这是 React app (and code). It generates 3 random objects (from list of 500+ objects stored locally). I want to call IconFinder API 当随机选择 objects 并且只显示图标时 （而不是事先找到 500 个图标）。

我运行它在 Windows 10 上 Google Chrome 版本 84.0.4147.89（正式版）（64 位）。代码托管在 Codesandbox 上。 大家可以看看code here or just the output and Chrome dev tools here

他们在 Docs

中显示的演示 XHR GET 请求

var data = null;

var xhr = new XMLHttpRequest();

xhr.addEventListener("readystatechange", function () {
  if (this.readyState === this.DONE) {
    console.log(this.responseText);
  }
});

xhr.open("GET", "https://api.iconfinder.com/v4/icons/search?query=arrow&count=10");
xhr.setRequestHeader("authorization", "Bearer <API KEY HERE>");

xhr.send(data);

我的获取 GET 请求

let url = "https://api.iconfinder.com/v4/icons/search?query=arrow&count=1&premium=0";
let h = new Headers();
h.append("Accept", "application/json");
h.append(
  "authorization",
  "Bearer <API KEY HERE>"
);
let req = new Request(url, {
  method: "GET",
  headers: h,
  credentials: "include"
});

fetch(req)
  .then(response => {
    if (response.ok) {
      return response;
    } else {
      throw Error(`Request rejected with status ${response.status}`);
    }
  })
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(err => console.error("Error: ", err.message));

输出： 控制台读取 Error: Failed to fetch

在 Chrome 开发工具中，网络选项卡（屏幕截图 1） 我看到一个 fetch 类型的文件（屏幕截图 2） 和 json 类型的文件（屏幕截图 3 和 4） 有问题。

我试过的

Fetch GET 请求适用于具有 Star Wars API (no authentication required), but not for MovieDB API 的 Codesandbox（url 中的身份验证不是 headers - 例如 https://api.themoviedb.org/3/search/movi?api_key=<INSERT KEY>?<other parameters here> ）。它抛出了一个错误，因为 response.ok 不正确。
我尝试从其他在线 IDE（如 Scrimba.com 和 repl.it）上的 IconFinder API 和 MovieDB API 获取数据。那些也没用。
我试过使用 XHR 请求和获取等待请求，而不是在不同平台上使用 then 承诺链接的获取请求。运气不好。
我已经 double-checked 如何使用 IconFinder API 文档设置身份验证 headers。
我还 double-checked 我的 API 密钥已注册到 url 我正在调用它并且不限于任何域 （屏幕截图5)
浏览了这些论坛：看起来我在从 HTTPS 页面发出提取请求时出了点问题，但我不确定我需要根据这些信息更改我的代码中的哪些内容. 我已经尝试将 Codesandbox 上的页面重新加载为 http，但它会自动将我重定向到 https (Source 1, Source 2, Source 3, )

这是我第一次拨打 API 电话，所以我真的不知道出现问题的可能性有多大以及如何解决。我试过查看其他一些 Whosebug 线程，但我很难理解它们。接下来，我将尝试将 React App 传输到本地文件，看看我是否可以在那里发出获取请求。 有人对我还应该尝试什么有任何想法吗？

Answer 1

该问题是基于 CORS 错误。我的一个朋友告诉我测试 api 呼叫：

https://api.iconfinder.com/v4/icons/search?query=arrow&count=1&premium=0

通过https://reqbin.com/。它在测试网站上有效。

然后，他让我用这个Cors Anywhere tool向那个url提出要求就行了。像这样：

https://cors-anywhere.herokuapp.com/https://api.iconfinder.com/v4/icons/search?query=arrow&count=1&premium=0

这适用于我的本地开发环境。仍然不确定它是如何工作的。

Javascript Fetch - 如何修复 Failed to Fetch 错误（可能是由于在 HTTPS 站点上发出 HTTP 请求？）

Javascript Fetch - How to Fix Failed to Fetch Error (probably from making HTTP request on HTTPS site?)

javascript

fetch

reactjs

codesandbox