在 Firebase 上部署 React App 后，Axios 无法获取 API 数据答案

【问题标题】：Axios unable to fetch API data after deploying the React App on firebase在 Firebase 上部署 React App 后，Axios 无法获取 API 数据
【发布时间】：2020-12-02 15:57:46
【问题描述】：

我正在制作一个网络应用程序来获取最新的新闻更新，但在部署后我遇到了问题。该应用程序在 localhost 上完美运行并从 newsapi 获取所有数据，但是当我将其部署在 firebase 或 github 上时，axios 无法获取 api 或将其显示在屏幕上。这是 link 到我的 github 存储库。

import React, {useState, useEffect } from "react";
import NewsArt from "../NewsArt";
import axios from "axios";



function AllNews(props) {
  

  const [data, setData] = useState({ articles: [] });
 
  useEffect(() => {
    const fetchData = async () => {
      const result = await axios(
        'https://newsapi.org/v2/top-headlines?country=us&apiKey=09a334ba3fbe41acaff79515476dc4cc',
      );
 
      setData(result.data);
    };
 
    fetchData();
  }, []);

  return (
   
    <div>
      <ul>
      {data.articles.map(item => (
              <NewsArt 
               title= {item.title}
               urlToImage = {item.urlToImage}
               description = {item.description}
               url = {item.url} 
               publishedAt = {item.publishedAt} 
               author = {item.author} />

            ))}

            </ul>
         
    </div>

  );
}

export default AllNews;

mgur.com/vltyv.png

【问题讨论】：

我认为由于 CORS，api 不起作用。你可以在浏览器检查中检查它吗？
link 我想你能告诉我如何让它工作吗？
你使用免费的新闻API计划吗？
我已回答，请告诉我您的反馈
感谢您的检查。如果您认为它有效，请支持我的答案。谢谢。

标签： javascript reactjs api axios

【解决方案1】：

正如您在此处看到的，您正在使用新闻 api 作为开发人员计划。你可以看到 https://newsapi.org/pricing 并且知道 CORS 在部署的站点上没有启用，如果你使用开发者计划，只有在 localhost 上启用。

所以有两种方法可以解决这个问题。

您购买软件包而不是开发人员计划仅在您的前端使用 newsapi。
如果您不想购买，请考虑使用后端。我遇到了同样的问题，最简单的解决方法是创建一个 firebase 云函数，该函数在那里调用新闻 api 并返回您将在前端使用的自定义结果。

【讨论】：