在 firebase 上部署 React 应用程序后，Axios 无法获取 API 数据

Question

我正在制作一个网络应用程序来获取最新的新闻更新，但在部署它后遇到问题。该应用程序在本地主机上完美运行并从 newsapi 获取所有数据，但是当我将其部署在 firebase 或 github 上时，axios 无法获取 api 或将其显示在屏幕上。这是我的 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

Answer 1

正如您在这里看到的，您正在使用新闻 api 作为开发人员计划。您可以查看https://newsapi.org/pricing并知道 CORS 未在部署的站点上启用，仅在使用开发人员计划的情况下在本地主机上启用。有两种方法可以解决这个问题。您购买软件包而不是开发人员计划在前端简单地使用 newsapi。如果您不想购买，请考虑使用后端。我遇到了同样的问题，最简单的解决方法是创建一个 firebase 云函数，该函数在那里调用新闻 api 并返回您将在前端使用的自定义结果。