React对接Flask时遭遇403 Forbidden错误，求解决方案

以下是针对你遇到问题的具体排查和解决步骤：

1. 修正Flask CORS配置 #

虽然你已经添加了CORS，但可以尝试更精确的资源匹配配置，确保/api路径的请求被正确允许：

from flask import Flask
from flask_cors import CORS

app = Flask(__name__)
# 针对/api路径配置CORS，允许所有来源、GET方法
CORS(app, resources={r"/api": {"origins": "*", "methods": ["GET"]}})

@app.route('/api', methods=['GET'])
def index():
    return {
        'name':'Hello World',
        'author': 'me',
        'hello': 'world'
    }

if __name__ == '__main__':
    # 明确指定监听地址和端口，确保和React代理一致
    app.run(host='127.0.0.1', port=5000, debug=True)

2. 确保React代理生效 #

修改package.json中的代理配置后，必须重启React开发服务器，否则新的代理规则不会生效。执行以下步骤：

• 停止当前的React服务（按Ctrl+C）
• 重新运行npm start启动服务

3. 增强Fetch的错误排查 #

修改CardPage.js中的fetch代码，添加错误捕获，获取更详细的错误信息：

useEffect(() => {
    fetch('/api')
        .then(response => {
            if (!response.ok) {
                throw new Error(`请求失败，状态码：${response.status}`);
            }
            return response.json();
        })
        .then(data => console.log(data))
        .catch(error => console.error('请求错误详情：', error));
}, [])

4. 排查代理是否正常工作 #

打开浏览器开发者工具的「Network」面板，查看/api请求的实际跳转地址：

• 如果请求地址显示为http://localhost:5000/api，说明代理生效，问题出在Flask端
• 如果地址还是http://localhost:3000/api，说明代理未生效，需检查：
  • package.json中的proxy配置是否正确（确保末尾有斜杠：http://127.0.0.1:5000/）
  • 确认没有使用自定义的代理工具（如http-proxy-middleware）冲突
  • 尝试清除浏览器缓存，用隐私模式重新测试

5. 检查Flask端请求接收情况 #

启动Flask服务后，查看控制台输出：

• 如果没有收到任何请求记录，说明React的请求没有到达Flask，重点排查代理问题
• 如果收到请求但返回403，检查是否有其他Flask中间件（如CSRF保护）拦截了请求（你的代码中未添加，但如果环境中有其他扩展需排查）

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