为啥我的 Axios fetch 会出现 CORS 错误？

Posted 2023-02-22

【中文标题】为啥我的 Axios fetch 会出现 CORS 错误？

【英文标题】：Why is my Axios fetch giving CORS errors?为什么我的 Axios fetch 会出现 CORS 错误？

【发布时间】：2021-07-02 23:50:23

【问题描述】：

我花了 3 个多小时试图研究并找到解决方案。我在 *** 上查看了许多其他答案，但没有任何帮助。我的研究列表在底部

我正在尝试访问公共 API。

当我使用curl 时，它是完全可以访问的。

当我尝试在 React 应用程序中访问它时，我收到一个错误。

这是我的代码：

const API = 'https://btcilpool.com/api/status';
const config = 
        headers: 
            'Access-Control-Allow-Origin': '*',
            'Content-Type': 'application/json',
        ,
    ;
axios.get(API, config);

这是错误：

GET https://btcilpool.com/api/status net::ERR_HTTP2_PROTOCOL_ERROR
Uncaught (in promise) Error: Network Error
    at createError (createError.js:16)
    at XMLHttpRequest.handleError (xhr.js:84)
Uncaught (in promise) TypeError: Failed to fetch

API 如下所示：

// 20210407103327
// https://btcilpool.com/api/status


  "x17": 
    "name": "x17",
    "port": 3737,
    "coins": 1,
    "fees": 3,
    "hashrate": 0,
    "workers": 282,
    "estimate_current": "0.00000000",
    "estimate_last24h": "0.00000000",
    "actual_last24h": "0.00000",
    "mbtc_mh_factor": 1,
    "hashrate_last24h": 7143330385.0569
  

我的研究：

https://blog.container-solutions.com/a-guide-to-solving-those-mystifying-cors-issues

What's the net::ERR_HTTP2_PROTOCOL_ERROR about?

CORS error - my headers

【问题讨论】：

这能回答你的问题吗？ Why does my javascript code receive a "No 'Access-Control-Allow-Origin' header is present on the requested resource" error, while Postman does not?

基本上，这是说需要在 API 方面修复 CORs 错误，而不是在 React 方面？ @NinoFiliu

【参考方案1】：

CORS 要求由主机设置，除了询问它们是否允许 CORS 标头之外，您无能为力。

一种解决方法是使用代理。因此，您将在自己的服务器上发出请求并将结果传递回您的客户端。

这是一个使用免费代理的示例，但我不建议在生产环境中这样做：

// This will result in your error
axios
 .get('https://btcilpool.com/api/status')
 .then((response) => console.log('Response', response))
 .catch((error) => console.log('Error', error))
 

// This will give you your expected result
axios
 .get(`https://api.allorigins.win/get?url=$encodeURIComponent('https://btcilpool.com/api/status')`)
 .then((response) => console.log('Response', response))
 .catch((error) => console.log('Error', error))

https://jsfiddle.net/51qhnfw0/

【讨论】：

非常感谢，这行得通...我将与 API 人员交谈并尝试让他们将 CORS: * 添加到他们身边。