进行 api 调用时，CORS 策略已阻止获取错误

Posted 2023-03-03

【中文标题】进行 api 调用时，CORS 策略已阻止获取错误

【英文标题】：Getting error has been blocked by CORS policy when making api call

【发布时间】：2019-04-14 01:04:26

【问题描述】：

当我尝试对kickstarter Staff pick json endpoint 进行 api 调用时出现以下错误

这正是错误的样子

localhost/:1 访问 XMLHttpRequest at 'https://www.kickstarter.com/discover/recommended?format=json' 来自 来源“http://localhost:3000”已被 CORS 策略阻止：否 请求中存在“Access-Control-Allow-Origin”标头 资源。

我之前遇到过这个错误，但那是在我尝试进行本地 API 调用时。

我知道我可以在浏览器上启用 cors，这可能会修复错误，但我试图避免它。

有什么想法或修复吗？

我正在使用 axios 进行 api 调用

axios.get("https://www.kickstarter.com/discover/recommended?format=json").then(response => 

[更新：] 谁能帮我弄清楚我们如何将它与 Promise 一起使用。

 let Base_url = axios.get(base_url)
  let StaffPick = axios.get(staffPick)


   return Promise.all(Base_url, StaffPick).then(response => 

员工挑选是https://www.kickstarter.com/discover/recommended?format=json 和 base_url 是：http://coincap.io/map

【问题讨论】：

如果 API 未启用 CORS（或提供 JSONP），您需要在您控制的服务器或第三方服务上使用代理

@charlietfl 非常感谢您的回答。你能简要解释一下吗？你能建议我获取 Kickstarter 数据的方法吗？

在网络上搜索 "ajax proxy"

从浏览器点击该端点时似乎很好...在此处分享您的获取请求代码...

@SakoBu 你显然没有尝试使用 XMLHttpRequest() 或 fetch() 这是 CORS 发挥作用的地方

【参考方案1】：

像这样尝试它，它应该可以工作：

fetch(
  'https://cors-anywhere.herokuapp.com/https://www.kickstarter.com/discover/recommended?format=json')
  .then(response => response.json())
  .then(data => console.log(data));

或者与 axios 等价的...

这里是代码沙箱的现场演示：https://codesandbox.io/s/ox7wz9ny15

我们没有编写自己的代理服务器，而是使用这个：https://github.com/Rob--W/cors-anywhere

注意：如果您想在生产中使用它，我建议您编写自己的代理服务器...有关 CORS 的更多信息：https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

【讨论】：

解释为什么它应该工作会很有帮助

另外，如果你包括我们如何能够使用它promise.all？将此作为我的第二个 URL：coincap.io/map（更新相同的代码）

@KuchBhi 你有一个 CORS 问题解决了它......这是一个关于如何在 axios 中使用 promise.all 的单独问题......这里是文档：github.com/axios/axios