使用Flask后端部署React应用时遭遇403禁止访问错误求助

可能的原因及修复步骤 #

1. 确保Flask返回标准JSON响应 #

直接返回字典可能导致响应头的Content-Type不正确，改用jsonify包装响应，保证输出符合JSON规范：

from flask import Flask, jsonify

app = Flask(__name__)

@app.route('/foo')
def get_current_time():
    return jsonify({'field': 'foo'})

2. 检查Flask的CSRF保护设置 #

如果使用了Flask-WTF，默认的CSRF保护会拦截未携带令牌的请求。开发环境可以临时给目标路由豁免CSRF检查：

from flask_wtf.csrf import CSRFProtect

app = Flask(__name__)
app.config['SECRET_KEY'] = 'your-dev-secret-key'  # 必填，否则CSRF保护会报错
csrf = CSRFProtect(app)

# 给/foo路由豁免CSRF检查
@app.route('/foo')
@csrf.exempt
def get_current_time():
    return jsonify({'field': 'foo'})

如果不需要CSRF保护，直接移除CSRFProtect相关代码即可。

3. 确认React的proxy配置正确 #

在React项目的package.json中，确保proxy字段指向Flask服务器的地址（默认Flask运行在5000端口）：

{
  "name": "your-react-app",
  "proxy": "http://localhost:5000",
  // 其他配置项...
}

修改proxy配置后必须重启React开发服务器（停止npm start后重新启动），否则新配置不会生效。

4. 完善前端错误处理逻辑 #

403响应没有返回有效JSON，导致res.json()抛出异常。添加错误处理可以更清晰地排查问题：

useEffect(() => {
  fetch('/foo')
    .then(res => {
      if (!res.ok) {
        throw new Error(`请求失败: ${res.status} ${res.statusText}`);
      }
      return res.json();
    })
    .then(data => {
      setCurrentTime(data.field);
    })
    .catch(err => {
      console.error('请求出错:', err);
    });
}, []);

5. 验证服务运行状态 #

• 确保Flask服务器正在运行（执行flask run或python app.py启动）
• 确认Flask端口和proxy配置一致（若修改过Flask端口，需同步更新proxy字段）

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