基于Flask-SocketIO的简易通讯工具在IE中报405错误求助

首先，我一眼就看到了导致IE报错的核心问题，再结合兼容性细节，给你整理出修复步骤：

1. 前端语法错误：无效的SocketIO连接地址 #

你的IE分支代码里有个低级语法错误，直接导致SocketIO连接失败：

// 错误代码：多了一个多余的加号
if (check_if_msie()) socket = io.connect(location.protocol + "//" + location.host + + ':' + location.port);

这里的+ + ':'会把:尝试转为数字，结果得到NaN，生成的连接地址会变成http://xxx:xxxxNaN:xxxx这种无效格式。

因为SocketIO没连上，socket.on('connect', ...)里的表单提交事件绑定根本没执行，用户点击提交时，表单直接POST到根路径/——而你的Flask根路由只支持GET请求，自然返回405 - Method Not Allowed。

修复方法 #

修正URL拼接，而且location.host已经包含端口号，不需要重复拼接location.port，还可以统一所有浏览器的连接逻辑：

// 简化并修正连接代码
socket = io.connect(location.protocol + '//' + location.host);

// 如果你想保留IE判断，也可以这么写：
if (check_if_msie()) {
    socket = io.connect(location.protocol + '//' + location.host);
} else {
    socket = io.connect('http://' + document.domain + ':' + location.port);
}

2. 服务端异步支持缺失 #

你注释掉了eventlet.monkey_patch()，这对IE来说很关键：IE不支持WebSocket，SocketIO会降级到轮询（polling）模式，需要eventlet的异步补丁来处理这类请求。

修复方法 #

取消注释这行代码：

eventlet.monkey_patch()
socketio = SocketIO(app)

3. 额外优化建议 #

为了避免类似问题，再给你两个小建议：

• 兜底阻止表单默认行为：把表单提交事件绑定移到connect回调外面，就算SocketIO连接失败，也不会触发原生POST：

  $(function() {
      $('form').on('submit', function(e) {
          e.preventDefault();
          if (!socket) {
              alert("连接失败，请检查浏览器兼容性");
              return;
          }
          let user_name = $('input.username').val();
          let user_input = $('input.message').val();
          socket.emit('chat event', { user_name : user_name, message : user_input })
          $('input.message').val('').focus();
      });
  });
  

• 增强IE检测逻辑：原函数无法检测IE 11，优化一下：

  function check_if_msie() {
      return /MSIE|Trident/.test(window.navigator.userAgent);
  }
  

验证步骤 #

1. 修正前端代码后重启服务
2. 打开IE的开发者工具（F12）：
   • 查看Console确认SocketIO连接地址正确
   • 查看Network标签，确认SocketIO的轮询请求（GET/POST）都返回200
   • 提交表单，检查服务端是否收到chat event日志

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