在 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 并返回您将在前端使用的自定义结果。