React项目使用axios调用Flask接口后页面提示需启用JavaScript

你遇到的You need to enable JavaScript to run this app.报错，本质是前端JS运行时抛出未捕获异常，导致React应用挂载失败，回退显示了HTML文件中noscript标签的默认提示，和浏览器是否开启JavaScript无关。结合你贴的代码，共有3处核心问题，逐一修复即可恢复正常：

问题1：前端请求返回值字段匹配错误+缺少异常捕获 #

你的后端接口返回的JSON结构为{"issuccessful":true,"results":results_data}，但前端代码错误读取了不存在的response.data.results_data字段，且整个异步请求没有加错误捕获：只要后端接口报错（500、跨域、服务未启动）、或者返回结构不符合预期，就会抛出未捕获的Promise异常，直接打断React渲染流程，导致页面崩溃。

修复后的前端调用代码 #

async componentDidMount() {
  try {
    const response = await axios.get("http://127.0.0.1:9001/api/Recommendation");
    // 对应后端返回的results字段，不要写错字段名
    this.setState({
      recommendation: response.data.results,
    });
  } catch (err) {
    console.error("推荐数据加载失败", err);
    // 错误场景下给state赋默认值，避免渲染时报错
    this.setState({
      recommendation: [],
      loadFailed: true
    })
  }
}

注意：确认组件顶部已经正确引入axios：import axios from 'axios'

问题2：后端代码存在导入冲突、冗余导入 #

你从colorama导入了Cursor类，后续又将pymysql生成的游标对象赋值给同名的Cursor变量，存在变量名冲突风险，极易触发接口500错误。同时代码中存在多处变量拼写错误，提高了后续维护的出错概率。

修复后的后端Flask代码 #

from flask import Flask
from flask_cors import CORS
import pymysql
# 删除无用的colorama Cursor导入，避免变量冲突

app = Flask(__name__)
CORS(app)

@app.route("/api/Recommendation", methods=["GET"])
def data1():
    db = pymysql.connect(
        host="localhost",
        user="root",   
        password="password",
        db="portfolio",
        autocommit=True
    )
    # 游标变量改用小写命名，避免和类名冲突
    cursor = db.cursor()
    query1 = "SELECT * FROM recommendation WHERE onshowcase=TRUE"
    cursor.execute(query1)
    recommendation_data = cursor.fetchall()
    results_data = []
    for item in recommendation_data:
        recommendation_obj = {
            "id": item[0],
            "cardtitle": item[1],
            "cardbody": item[2],
            "cardfooter": item[3]
        }
        results_data.append(recommendation_obj)
    cursor.close()
    db.close()
    return {"issuccessful": True, "results": results_data}

修复后验证步骤 #

• 先启动Flask服务，确认服务运行在9001端口，直接在浏览器访问http://127.0.0.1:9001/api/Recommendation，能正常返回JSON数据再进行下一步
• 启动前端项目，打开浏览器控制台，确认没有跨域、500类的请求错误
• 检查state中recommendation字段是否正确拿到接口返回的数组数据

内容的提问来源于stack exchange，提问作者Mayank