React Router新手求助：登录请求应为POST却触发GET问题

嘿，作为React和React Router新手，遇到这些问题很正常，我来一步步帮你理清～

一、登录逻辑（Ajax请求）与页面跳转的代码位置 #

在React中，这类交互逻辑应该放在组件的事件处理函数里，比如表单的onSubmit事件处理方法中。页面跳转则借助React Router提供的导航工具来实现，具体分版本：

函数组件（React Router v6+）示例 #

用useNavigate钩子来实现跳转，逻辑写在提交处理函数里：

import React, { useState } from "react";
import { useNavigate, Link } from "react-router-dom";
import $ from "jquery";

const LoginForm = () => {
  const [username, setUsername] = useState("");
  const [password, setPassword] = useState("");
  const navigate = useNavigate(); // 获取导航方法

  const handleLogin = (e) => {
    e.preventDefault(); // 关键！阻止表单默认的GET提交行为
    // 这里写Ajax登录请求逻辑
    $.ajax({
      url: "/security/login",
      method: "POST", // 明确指定POST方法
      data: {
        username,
        password,
        format: "json"
      },
      success: (res) => {
        // 登录成功后跳转到目标页面，比如首页
        navigate("/home");
      },
      error: (err) => {
        console.error("登录失败：", err);
        // 这里可以添加错误提示，比如弹窗或页面内提示
      }
    });
  };

  return (
    <form onSubmit={handleLogin}>
      <div>
        <label>用户名：</label>
        <input
          type="text"
          value={username}
          onChange={(e) => setUsername(e.target.value)}
        />
      </div>
      <div>
        <label>密码：</label>
        <input
          type="password"
          value={password}
          onChange={(e) => setPassword(e.target.value)}
        />
      </div>
      <button type="submit">登录</button>
      <Link to="/register">没有账号？去注册</Link>
    </form>
  );
};

export default LoginForm;

类组件（React Router v5及以下）示例 #

如果用类组件，需要通过withRouter高阶组件注入history对象，然后用history.push跳转：

import React, { Component } from "react";
import { Link, withRouter } from "react-router-dom";
import $ from "jquery";

class LoginForm extends Component {
  state = { username: "", password: "" };

  handleLogin = (e) => {
    e.preventDefault();
    const { username, password } = this.state;
    $.ajax({
      url: "/security/login",
      method: "POST",
      data: { username, password, format: "json" },
      success: () => {
        this.props.history.push("/home"); // 跳转页面
      },
      error: (err) => console.error(err)
    });
  };

  render() {
    const { username, password } = this.state;
    return (
      <form onSubmit={this.handleLogin}>
        {/* 表单输入框部分和上面类似，略 */}
      </form>
    );
  }
}

export default withRouter(LoginForm);

核心原则：把用户交互触发的逻辑（比如登录请求、页面跳转）绑定到对应的事件上，不要放在render里，避免重复执行。

二、解决POST请求被转为GET的405错误 #

从你给出的错误URL里有callback=jQuery...可以看出，你的请求被自动转成了JSONP请求，而JSONP只能用GET方式，这就是为什么会出现405（方法不允许）错误。解决方法如下：

1. 阻止表单默认提交行为
   一定要在handleLogin函数开头加上e.preventDefault()，不然表单会触发浏览器默认的GET提交，覆盖你的Ajax请求。

2. 修正jQuery Ajax配置

   • 明确指定method: "POST"（或旧版本jQuery用type: "POST"）
   • 去掉所有JSONP相关的配置：比如dataType: "jsonp"、jsonp: "callback"这类参数，改成dataType: "json"（或者不指定，jQuery会自动识别响应类型）
   • 确保请求参数里没有自动带上callback参数，这是JSONP的标志。

调整后的Ajax配置应该像上面示例里那样，这样就能发起正常的POST请求了。

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