Flask+React项目npm run build后API请求失败问题求助

核心原因 #

本地开发时React的proxy代理配置（通常写在package.json中）仅在开发环境生效，执行npm run build后代理失效，导致API请求被发送到了serve -s build启动的前端服务，而非Flask后端。同时serve -s build的SPA回退机制会将所有未匹配到静态资源的请求返回index.html，最终出现API请求返回页面内容的异常。

解决方案 #

1. 修正axios请求的基础路径 #

确保axios请求的baseURL指向Flask后端的实际地址，可通过环境变量区分开发/生产环境：

import axios from 'axios';

// 根据环境设置基础路径
const baseURL = process.env.NODE_ENV === 'development'
  ? '/api' // 开发环境用代理路径
  : 'http://localhost:5000/api'; // 生产环境直接指向Flask后端地址

const api = axios.create({ baseURL });
export default api;

2. 让Flask直接托管前端静态文件（推荐） #

无需单独用serve启动前端，将React构建后的静态文件交给Flask托管，同时处理前端路由回退：

from flask import Flask, send_from_directory

# 配置Flask静态文件路径指向React的build目录
app = Flask(__name__, static_folder='../build', static_url_path='/')

# 保留你的API路由
@app.route('/api/generate-string')
def generate_string():
    # 你的API逻辑代码
    return {"data": "generated string"}

# 处理前端路由，所有非API请求返回index.html
@app.route('/', defaults={'path': ''})
@app.route('/<path:path>')
def catch_all(path):
    return send_from_directory(app.static_folder, 'index.html')

if __name__ == '__main__':
    app.run(debug=True)

启动Flask服务后，直接访问Flask的端口即可完成前后端统一部署。

3. 为serve配置反向代理（需分开部署时用） #

如果必须用serve单独启动前端，可创建serve.json配置文件实现API请求转发：

{
  "rewrites": [
    {
      "source": "/api/**",
      "destination": "http://localhost:5000/api/$1"
    }
  ]
}

启动serve时指定配置文件：

serve -s build -c serve.json

4. 避免API路径与前端路由冲突 #

确保你的API路径（如/api/xxx）与前端路由路径无重叠，防止serve将API请求误判为前端路由请求。

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