Javascript api调用在其本地主机上工作，但在部署到firebase后不工作

我有一个应用程序，它使用新闻api获取一堆新闻文章并显示在一个页面中，该应用程序在运行localhost时运行find，但部署到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，{createContext，useffect，useState}来自“React”；
从“axios”导入axios；
export const newscoxt=createContext（）；
导出常量NewsContextProvider=（道具）=>{
const[data，setData]=useState（）；
const apiKey=“xxx”；
useffect（（）=>{
axios
.得到(
`http://newsapi.org/v2/top-headlines?country=ca&category=health&apiKey=${apiKey}`
)
.然后（（响应）=>setData（响应.数据））
.catch（（错误）=>console.log（错误））；
}, []);
返回(
{props.children}
);
};

import React，{useContext}来自“React”；
从“./NewsContext”导入{NewsContext}；
从“/NewsArticle”导入新闻文章；
导入“./news.css”
功能新闻（道具）{
const{data}=useContext（新闻上下文）；
控制台日志（数据）；
返回(
今日新闻
{数据
？数据.文章.地图（（新闻）=>(
))
：“正在加载”}
);
}
导出默认消息；

现在在我的网站上，它只显示“加载”，这意味着没有返回任何数据。我也得到了这个错误：错误：网络错误 at t.exports（createError.js:16）

---

在XMLHttpRequest.h.onerror（xhr.js:91）

控制台日志中有什么错误？它只是在XMLHttpRequest.h.onerror（xhr.js:91）的t.exports（createError.js:16）上说了错误：Network error，这是：VM18:1混合内容：“xxxx处的页面是通过HTTPS加载的，但请求了不安全的XMLHttpRequest端点”。此请求已被阻止；内容必须通过HTTPS提供。您尝试执行的操作是不可能的。这违反了网页的安全沙箱。我可以做些什么来访问这些数据吗？

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;