React对接Flask API报错：Uncaught (in promise) SyntaxError

核心问题定位 #

你收到的<!DOCTYPE>开头的HTML，大概率是Flask的404错误页面、调试错误页面，说明React请求的API路径没有匹配到Flask的正确路由，或者Flask端本身返回了非JSON内容。以下是逐步排查和解决步骤：

1. 先确认Flask API本身是否正常返回JSON #

这是最关键的第一步，先排除Flask端的问题：

• 直接访问API端点：用浏览器或Postman打开Flask的API地址（比如http://localhost:5000/api/data），看返回的是不是纯JSON。如果这里返回HTML，问题肯定在Flask端：
  • 检查路由拼写：确保@app.route('/api/data')的路径和你React请求的路径完全一致，注意大小写、斜杠等细节。
  • 确认请求方法匹配：如果React用GET请求，Flask路由要允许GET方法，比如@app.route('/api/data', methods=['GET'])，默认路由只允许GET，但若你显式指定了其他方法，会导致不匹配。
  • 确保用jsonify正确返回：视图函数必须返回jsonify()包装的响应，示例：

    from flask import Flask, jsonify
    from flask_cors import CORS
    import mysql.connector
    
    app = Flask(__name__)
    CORS(app)
    
    @app.route('/api/data', methods=['GET'])
    def get_mysql_data():
        try:
            # MySQL连接逻辑示例
            db = mysql.connector.connect(host="localhost", user="root", password="your_pw", database="test_db")
            cursor = db.cursor(dictionary=True)
            cursor.execute("SELECT * FROM your_table")
            data = cursor.fetchall()
            db.close()
            return jsonify({"data": data}), 200
        except Exception as e:
            # 出错时也要返回JSON，避免返回HTML错误页
            return jsonify({"error": str(e)}), 500
    
    if __name__ == '__main__':
        app.run(debug=False) # 调试模式下出错会返回HTML错误页，先关闭调试模式测试
    

  • 关闭Flask调试模式：调试模式下，代码报错会返回HTML格式的错误页面，而非JSON，测试时先把debug设为False。

2. 检查React端的请求与代理配置 #

• 确认请求路径正确：因为用了setupProxy.js，React里的请求必须用相对路径，比如：

  // 正确写法，会被代理到http://localhost:5000/api/data
  fetch('/api/data')
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.error(err))
  

  不要写绝对路径（比如http://localhost:5000/api/data），否则代理不会生效，可能触发跨域或路径错误。
• 验证代理配置：setupProxy.js的配置要确保前缀和目标地址正确，示例：

  const { createProxyMiddleware } = require('http-proxy-middleware');
  
  module.exports = function(app) {
    app.use(
      '/api', // React请求中带/api前缀的路径都会被代理
      createProxyMiddleware({
        target: 'http://localhost:5000', // Flask服务的地址
        changeOrigin: true,
      })
    );
  };
  

  配置后要重启React服务，热重载可能不生效。

3. 检查CORS配置是否生效 #

• 确保Flask的CORS覆盖了目标路由：要么全局配置CORS(app)，要么针对特定路由加@cross_origin()装饰器。
• 可以指定允许的源，避免全局开放的安全问题：

  CORS(app, origins=['http://localhost:3000']) # 只允许React的域名跨域
  

4. 最后验证服务状态 #

• 确认Flask在5000端口、React在3000端口正常运行，没有端口冲突。
• 重启两个服务，清除浏览器缓存后再测试。

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