JS提交HTML消息表单触发405 Method Not Allowed报错排查

报错根因 #

你遇到的405不是JS获取输入内容的逻辑有问题，是表单原生提交行为没被拦截，向后端发了未被支持的POST请求：

• 你把表单的submit事件绑定逻辑写在了socket.on("connect")的回调里，这个回调是Socket.IO异步连接成功后才会执行。如果用户在socket连接完成前点击发送按钮，表单上根本没绑定你写的拦截逻辑，e.preventDefault()不会生效。
• 表单标签上写了method="POST"且action为空，未被拦截的提交行为会默认向当前页面URL发POST请求，而你的后端服务没有为当前路由配置POST请求的处理逻辑，就会返回405方法不允许的错误。

修复方法 #

• 把表单submit事件的绑定逻辑移出socket连接成功的回调，放到DOM加载完成后就立即执行，保证用户点击提交时拦截逻辑已经生效
• 移除表单上不必要的method="POST"属性，从HTML层面避免误触发原生POST提交
• 加个socket连接状态判断，没连上的时候提示用户，避免消息发送失败无反馈

修正后的JS代码 #

// DOM加载完成后立即执行逻辑
$(function() {
  const socket = io.connect("http://" + document.domain + ":" + location.port);
  
  // 直接绑定表单提交事件，不等socket连接
  $("form#msgForm").on("submit", async function (e) {
    e.preventDefault();

    // 连接未建立时拦截提交
    if (!socket.connected) {
      alert("正在连接服务器，请稍候再发送消息");
      return;
    }

    const msg_input = document.getElementById("msg");
    const user_input = msg_input.value.trim();
    // 空消息不发送
    if (!user_input) return;
    const user_name = await load_name();

    msg_input.value = "";

    socket.emit("event", {
      message: user_input,
      name: user_name,
    });
  });

  socket.on("connect", async function () {
    const usr_name = await load_name();
    if (usr_name) {
      socket.emit("event", {
        message: usr_name + " just connected to the server!",
        connect: true,
      });
    }
  });
});

修正后的HTML表单代码 #

<form id="msgForm" style="bottom:0; margin: 0% 0% 0% 0%;">
    <div class="input-group mb-3">
          <input type="text" class="form-control" placeholder="Message" aria-label="Message" id="msg">
          <div class="input-group-append">
            <button class="btn btn-success" type="submit" id="sendBtn">Send</button>
          </div>
    </div>
</form>

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