HTTPS环境下Express站点e.preventDefault()失效且AJAX提交失败问题

API 探路者

2026-9-29

问题核心原因梳理

这个问题90%以上是混合内容拦截导致的，剩下的是常见的前端事件绑定、请求异常未捕获的问题，按下面的步骤排查就能解决：

1. 首查jQuery资源加载问题

HTTPS页面默认禁止加载HTTP协议的活跃资源（脚本、接口请求等），如果你页面里引入jQuery用的是http://开头的地址，在HTTPS环境下会被浏览器直接拦截：

验证方式：打开HTTPS页面的F12控制台，看有没有$ is not defined、「已拦截跨源请求」、「不安全的内容已被阻止」这类报错提示
解决方式：把jQuery的引入地址替换为HTTPS协议开头，或者用协议相对路径（比如//code.jquery.com/jquery-3.6.0.min.js，会自动适配当前页面的协议）

你的场景里HTTPS下一开始表单直接刷新，就是因为jQuery加载失败导致你写的`submit`事件监听代码根本没执行，表单走了默认的提交刷新逻辑。

2. 补充AJAX错误回调排查请求异常

你现在的AJAX代码只写了success回调，请求出错时没有任何提示，看不到具体报错原因，把代码改成下面的版本，看控制台输出的错误信息：

$('#sendmessageform').submit(function(e){
    e.preventDefault();
    $.ajax({
        url: '/submit',
        type: 'post',
        data:$('#sendmessageform').serialize(),
        success:function(data){
          console.log('请求成功', data)
        },
        error: function(xhr, status, error) {
          console.error('请求失败', status, error, xhr.responseText)
        }
    });
});

常见的错误场景有：

CORS限制：如果你的服务端配置了Access-Control-Allow-Origin只允许HTTP域名，HTTPS域名的请求会被直接拦截
SSL证书问题：如果你的站点SSL证书无效/自签名/过期，浏览器会阻止AJAX请求发送
反向代理配置问题：Bluehost的HTTPS请求大概率是通过Nginx反向代理转发到你Node的80端口的，如果Nginx配置里没有允许POST请求，或者没有正确转发请求到Node服务，也会导致请求失败

3. 确认事件绑定时机正确

如果你的script代码写在form标签的前面，又没有包裹在DOM加载完成的回调里，可能会出现执行代码时form还没渲染，事件绑定失败的问题，改成下面的写法更稳妥：

// 等DOM全部加载完成后再绑定事件
$(document).ready(function() {
  $('#sendmessageform').submit(function(e){
    e.preventDefault();
    // 剩下的AJAX逻辑不变
  });
});

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