在 React 中使用 fetch 与 Flask app.route 无法获取正确的信息

Question

我目前正在尝试使用 React 前端和 Flask/Python 后端创建一个标准网站。我有一个单独的文件 server.py，我在其中从 NewsAPI 获取数据并解析它：

from flask import Flask
import requests
from flask_cors import CORS

app = Flask(__name__)
CORS(app)

@app.route('/news')
def news():
    response = requests.get('https://newsapi.org/v2/everything?language=en&q=games&apiKey=[API KEY])
    data = response.json()
    authors,titles,descs,urls,urlToImages,publish_dates = [],[],[],[],[],[]
    all_news = {}

    for i in range(0,12):
        authors.append(data['articles'][i]['author'])
        titles.append(data['articles'][i]['title'])
        descs.append(data['articles'][i]['description'])
        urls.append(data['articles'][i]['url'])
        urlToImages.append(data['articles'][i]['urlToImage'])
        publish_dates.append(data['articles'][i]['publishedAt'])
    
    all_news = {"titles": titles, "descriptions":descs, "urls": urls, "urlToImages":urlToImages, "published": publish_dates, "authors": authors}
    return all_news

然后，在我的 App.js 中：

import React from 'react';
import { useEffect, useState } from 'react';
import './App.css';

function App() {

  useEffect(() => {
    fetch('/news')
    .then(res => res.json())
    .then(data => {
      console.log(data);
    })
  },[]);
  
  return (
    <div className="App">
      
    </div>
  );
}

export default App;

但是，我已经花了将近一整天的时间来修改这个问题，除了控制台中的这个错误之外，我似乎无法得到任何其他信息： 进一步查看，控制台只是获取网站本身的 index.html 代码，这可以解释为什么它不是正确的 JSON 格式，我假设这是由于获取路由时出现一些问题。任何提示将不胜感激！

我尝试卸载并重新安装flask，我还确保我的package.json中有一个代理，因为该网站位于localhost:3000，所以我也有代理，但我也尝试过与其他代理无济于事。

Answer 1

API 端点应该是完整路径，如

BASE_URL + GIVEN_PATH

，就像这里一样 -

fetch('http://localhost:5000/news')

超过

fetch('/news')

。

谢谢！