javascript - api调用在其本地主机时有效，但在部署到firebase后不起作用

Question

我有一个应用程序，它使用新闻 api 获取一堆新闻文章并将其显示在页面中，该应用程序在运行 localhost 时可以找到，但在部署到 firebase 后，它不会返回任何数据。

这是我的代码

import React, { createContext, useEffect, useState } from "react";
import axios from "axios";



export const NewsContext = createContext();

export const NewsContextProvider = (props) => {
  const [data, setData] = useState();
  const apiKey = "xxx";

  useEffect(() => {
    axios
      .get(
        `http://newsapi.org/v2/top-headlines?country=ca&category=health&apiKey=${apiKey}`
      )
      
      .then((response) => setData(response.data))
      .catch((error) => console.log(error));
  }, []);

  return (
    <NewsContext.Provider value={{ data }}>
      {props.children}
    </NewsContext.Provider>
  );
};

import React, { useContext } from "react";
import { NewsContext } from "../NewsContext";
import NewsArticle from "./NewsArticle";
import './news.css'

function News(props) {
  const { data } = useContext(NewsContext);
  console.log(data);

  return (
    <div>
      <h1 className="head__text">Today's News</h1>
      <div className="all__news">
        {data
          ? data.articles.map((news) => (
              <NewsArticle data={news} key={news.url} />
            ))
          : "Loading"}
      </div>
    </div>
  );
}

export default News;

现在在我的网站上，它只显示“正在加载”，这意味着没有返回数据。而且我也收到此错误：错误：XMLHttpRequest.h.onerror (xhr.js:91) 的 t.exports (createError.js:16) 的网络错误

标签： javascriptreactjsfirebase