亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

在 firebase 上部署 React 應用程序后,Axios 無法獲取 API 數據

在 firebase 上部署 React 應用程序后,Axios 無法獲取 API 數據

慕哥6287543 2023-09-28 17:37:37
我正在制作一個網絡應用程序來獲取最新的新聞更新,但在部署它后遇到問題。該應用程序在本地主機上完美運行并從 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
查看完整描述

1 回答

?
12345678_0001

TA貢獻1802條經驗 獲得超5個贊

正如您在這里看到的,您正在使用新聞 api 作為開發人員計劃。您可以查看https://newsapi.org/pricing并知道 CORS 未在部署的站點上啟用,僅在使用開發人員計劃的情況下在本地主機上啟用。

有兩種方法可以解決這個問題。

  • 您購買軟件包而不是開發人員計劃在前端簡單地使用 newsapi。

  • 如果您不想購買,請考慮使用后端。我遇到了同樣的問題,最簡單的解決方法是創建一個 firebase 云函數,該函數在那里調用新聞 api 并返回您將在前端使用的自定義結果。


查看完整回答
反對 回復 2023-09-28
  • 1 回答
  • 0 關注
  • 159 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號