Flask后端接收JSON注册参数时遇Method Not Allowed错误求助

问题 #

需要将用户填写的email、password和full_name值传递到Flask后端服务，已在客户端请求中设置Content-Type: application/json且添加了CORS选项，但持续收到错误提示：Method Not Allowed The method is not allowed for the requested URL。

后端代码（Python/Flask） #

@app.route("/register", methods=['POST'])
def register():
    data = request.get_json()  
    email = data.get('email')
    password = data.get('password')
    full_name = data.get('full_name')
    print(email + password + full_name)
    try:
        if not email or not isinstance(email, str):
            raise ValueError("Invalid Email. Email must be a non-empty string.")

        user = auth.create_user(
            email=email,
            password=password
        )
        db = firestore.client()
        user_ref = db.collection('users').document(user.uid)
        user_data = {
            'email': email,
            'full_name': full_name,
            'last_login': firestore.SERVER_TIMESTAMP
        }
        user_ref.set(user_data)

        session['email'] = email

        return jsonify({'message': 'User registered successfully'}), 200
    except auth.EmailAlreadyExistsError:
        return jsonify({'error': 'Email already exists'}), 400
    except ValueError as e:
        return jsonify({'error': str(e)}), 400

客户端代码（JavaScript） #

function getUserInput() {
    // Get all our input fields
    var email = document.getElementById('email').value;
    var password = document.getElementById('password').value;
    var full_name = document.getElementById('full_name').value;

    // Validate input fields
    if (validate_email(email) === false || validate_password(password) === false) {
        alert('Email or Password is Outta Line!!');
        return null;  // Return null to indicate validation failure
    }
    if (validate_field(full_name) === false) {
        alert('One or More Extra Fields is Outta Line!!');
        return null;  // Return null to indicate validation failure
    }

    return {
        email: email,
        password: password,
        full_name: full_name,
    };
}

function registerUser(userInput) {
    if (userInput === null) {
        // Validation failed, exit the registration process
        return;
    }

    // Move on with Auth
    fetch('/register', {
        method: 'POST',
        mode: 'cors',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify(userInput),
    })
    .then(response => response.json())
    .then(data => {
        // Handle success
        alert(data.message);
        redirectToGoogle();
    })
    .catch(error => {
        // Handle error
        alert('Error registering user: ' + error.message);
    });
}

排查与解决建议 #

• 检查路由URL匹配规则
  Flask默认开启严格路由模式，若前端请求路径是/register/（带末尾斜杠），而后端路由定义为/register，会导致路径不匹配。可以在路由中添加strict_slashes=False来兼容两种路径：

  @app.route("/register", methods=['POST'], strict_slashes=False)
  

• 确认CORS配置有效性
  确保Flask-CORS的配置允许/register路径接收POST请求，可通过两种方式配置：

  1. 全局配置：

     from flask_cors import CORS
     app = Flask(__name__)
     # 允许所有来源访问/register路径
     CORS(app, resources={r"/register": {"origins": "*"}})
     

  2. 路由单独配置：

     from flask_cors import cross_origin
     
     @app.route("/register", methods=['POST'])
     @cross_origin()  # 允许跨域请求此路由
     def register():
         # 函数内容
     

• 验证实际请求的方法与路径
  打开浏览器开发者工具（F12），切换到Network标签，触发注册请求后查看：

  • 请求方法是否为POST
  • 请求URL是否与后端路由/register完全一致（无大小写差异、多余路径）

• 检查路由是否被覆盖
  确认项目中没有其他路由定义了相同的/register路径，若存在多个同名路由，后定义的会覆盖先定义的，导致POST方法不被支持。

• 确认路由已被正确加载
  若路由定义在单独的文件中，确保已将该文件导入到Flask主应用中，避免路由未注册。

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