我如何用 reactjs 调用 api [重复]答案

【问题标题】：how I call api with reactjs [duplicate]我如何用 reactjs 调用 api [重复]
【发布时间】：2020-10-05 12:59:31
【问题描述】：

我编写了这些代码，但出现了一些错误：无法加载资源：Access-Control-Allow-Origin 不允许 Origin http://localhost:3000

我可以为这些代码做什么？非常感谢您的帮助...

import React, {useEffect, useState} from 'react';

function App() {
    const [coins,setCoins] = useState([]);
    const API_URL = 'https://sandbox-api.coinmarketcap.com/v1/cryptocurrency/listings/latest';

    const getCoins = (API) => {
        fetch(API, {
            "method": "GET",
            "headers": {
                "X-CMC_PRO_API_KEY": "b54bcf4d-1bca-4e8e-9a24-22ff2c3d462c",
                "content-type": "application/json",
                "accept": "application/json",
                'Access-Control-Allow-Origin':'*'
            }
        })
        .then(response => {
            console.log(response);
        })
        .catch(err => {
            console.log(err);
        });
    }

    useEffect(() => {
        getCoins(API_URL);
    }, []);

  return (
    <div>
        {coins.map(coin => (
            <div>{coin.id}</div>
        ))}
    </div>
  );
}

export default App;

【问题讨论】：

这与 React 无关，但如果您使用它来创建项目，您可以查看 proxy part for CRA documentation。如果没有，您可以查看 Webpack 的代理文档或您在那里使用的任何其他工具。由于您不是管理 API 部分的人，因此您应该使用后端来发出请求，或者按照我的建议使用开发代理。
不适用于我不理解的 cra 文档并尝试使用 Axios 但无法使用 useEffect(() => { //getCoins(LAST_URL); axios.get(LAST_URL,{headers: {' Access-Control-Allow-Origin':'*'}}).then(res => { setCoins(res.data); }).catch(error => console.log(error)); });跨度>
你不是管理 API 的人，你在那里做什么不起作用。您需要使用适当的 poxy。

标签： javascript reactjs api

【解决方案1】：

这仅仅意味着没有在后端/服务器端启用 CORS。

【讨论】：

【解决方案2】：

请。确保 API 服务器上是否允许 Access-Control-Allow-Origin。例如。如果您使用 nginx 来托管 API，则以下行应该存在于 nginx conf 文件中。

location / {
add_header 'Access-Control-Allow-Origin' '*';
}

也可以为 apache 添加类似的配置。

【讨论】：

我不使用 nginx