React前端表单提交到Flask后端报405方法不允许错误如何解决

问题根源 #

• 原生HTML表单默认提交会触发页面跳转，提交的数据格式为application/x-www-form-urlencoded，和后端预期接收的JSON格式不匹配
• 跨域预检的OPTIONS请求未被Flask路由处理，触发方法不允许报错
• 未阻止表单默认提交行为，请求未走React配置的代理规则，直接提交到前端服务地址，触发Cannot POST /报错

具体修复步骤 #

1. 改造React表单提交逻辑 #

取消默认表单提交行为，用fetch/axios主动发送JSON格式的POST请求，走配置的代理规则。

2. 补全Flask路由配置 #

添加跨域支持，兼容OPTIONS预检请求，优化JSON参数读取逻辑。

3. 确认服务端口匹配 #

保证Flask启动端口和package.json中配置的代理端口一致。

完整代码示例 #

React端代码 #

import { useState } from 'react';

function PatientForm() {
  const [inputValue, setInputValue] = useState('');

  const handleSubmit = async (e) => {
    // 阻止表单默认跳转
    e.preventDefault();
    try {
      const response = await fetch('/', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ variable: inputValue })
      });
      const result = await response.json();
      // 此处可直接使用返回的结果渲染页面
      console.log('后端返回结果：', result.variable);
    } catch (error) {
      console.error('请求失败：', error);
    }
  };

  return (
    <form className="patient-form" onSubmit={handleSubmit}>
      <input 
        type="text" 
        name="variable"
        value={inputValue}
        onChange={(e) => setInputValue(e.target.value)}
      />
      <input type="submit" value="提交" />
    </form>
  );
}

export default PatientForm;

Flask端代码 #

首先安装跨域依赖：
pip install flask-cors

再修改后端代码：

from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
# 开发环境开启全量跨域支持
CORS(app)

@app.route('/', methods=['POST', 'OPTIONS'])
def get_variable():
    # 处理跨域预检请求
    if request.method == 'OPTIONS':
        return jsonify({'code': 200}), 200
    # 安全读取JSON参数，避免无参数时报错
    request_data = request.get_json()
    variable = request_data.get('variable', '')
    return jsonify({"variable": 'Backend variable' + variable})

if __name__ == '__main__':
    # 端口需要和React package.json中配置的代理端口一致，示例为3001
    app.run(port=3001, debug=True)

注意事项 #

• 启动顺序：先启动Flask后端，再启动React前端，避免代理失效
• 不要直接通过GET方式访问Flask根路径，该路径仅支持POST、OPTIONS方法，GET访问报方法不允许属于正常现象
• 若修改了Flask的路由路径，需要同步修改React端fetch请求的路径

内容的提问来源于stack exchange，提问作者Justin Philip Fulkerson