CORS 标头“Access-Control-Allow-Origin”丢失错误

Question

我正在使用 React.JS 和 API 开发加密货币跟踪器。在我的 App.js 中，我在本地主机上运行它时遇到错误。

App.js

代码：-

import React, {useState, useEffect} from 'react';  
import axios from 'axios'
import './App.css';

function App() {
 const [coins, setCoins] = useState([])

  useEffect(() => {
      axios
      .get(
         'https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false'
      )
    .then(res => {
     setCoins(res.data)
    //  console.log(res.data);
    }).catch(error => console.log(error))
  },  []);

index.js

代码：-

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';


ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);

错误：- 跨源请求被阻止：同源策略不允许读取远程资源 https://api.coingecko.com/api/v3/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false。 （原因：CORS 标头“Access-Control-Allow-Origin”丢失）

Answer 1

为了避免在您的开发环境中出现cors问题，您可以使用例如提供的代理。

http-proxy-middleware

（https://www.npmjs.com/package/http-proxy-middleware）

安装后，您可以在

/src

目录中创建一个名为 setupProxy.js 的文件，例如：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = (app) => {
  app.use(
    '/coingecko',
    createProxyMiddleware({
      target: 'https://api.coingecko.com/api/v3',
      changeOrigin: true,
      pathRewrite: {
        '/coingecko': '/',
      },
    })
  );
};

在您的 axios 请求中，您将能够使用：

useEffect(() => {
      axios
      .get(
         '/coingecko/coins/markets?vs_currency=usd&order=market_cap_desc&per_page=10&page=1&sparkline=false'
      )
    .then(res => {
     setCoins(res.data)
    //  console.log(res.data);
    }).catch(error => console.log(error))
  },  []);

Answer 2

很有可能你已经用完了你的免费限制，它说因为它做了一些奇怪的事情并且它不知道该怎么做，这也发生在我身上，当我等待它在 10 分钟后自行修复