Ajax优惠券校验函数发起重复请求，遭遇混合内容错误

嘿，这个问题我之前也碰到过类似的情况，咱们一步步来排查解决：

首先先确认下你的核心代码（方便大家一起分析）：

校验函数：

function checkCoupon(str){ 
  if (window.XMLHttpRequest) { 
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest(); 
  } else { 
    // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); 
  } 
  xmlhttp.onreadystatechange=function() { 
    if (this.readyState==4 && this.status==200) { 
      alert('success'); 
    } 
  } 
  xmlhttp.open("GET","https://www.example.com/inc/checkCoupon?id=45&coupon="+str,true); 
  xmlhttp.send(); 
}

调用方式：

<input onchange="checkCoupon(this.value)" placeholder="Coupon">

问题根源分析 #

从你描述的现象（先HTTPS请求被取消，再HTTP请求被拦截）来看，最可能的原因是服务器端把HTTPS请求重定向到了HTTP版本——浏览器发起HTTPS请求后，收到了服务器的重定向响应（比如301/302），于是自动发起HTTP请求，但当前页面是HTTPS协议，浏览器的混合内容安全策略会直接拦截HTTP请求，同时取消最初的HTTPS请求。

解决方案 #

1. 检查并修正服务器重定向规则

登录你的服务器，检查https://www.example.com/inc/checkCoupon这个接口的配置：

• 如果是Apache，查看.htaccess文件里是否有强制把HTTPS转HTTP的规则；
• 如果是Nginx，检查server块里的rewrite或redirect配置。
  把这类规则移除，或者改成HTTPS内部跳转，确保HTTPS请求能直接被处理。

2. 使用相对路径避免协议不匹配

把请求URL改成相对路径，让浏览器自动继承当前页面的协议（HTTPS），从根源上避免混合内容问题：

// 把硬编码的HTTPS URL改成相对路径
xmlhttp.open("GET","/inc/checkCoupon?id=45&coupon="+str,true); 

这种方式更灵活，不管页面部署在HTTP还是HTTPS环境，请求都会用对应的协议发起。

3. 优化代码（可选但推荐）

你的XHR代码比较老旧，换成现代的fetch API不仅更简洁，还能更好地处理异常和编码问题：

async function checkCoupon(str) {
  // 对优惠券码做URL编码，避免特殊字符导致请求错误
  const encodedCoupon = encodeURIComponent(str);
  try {
    const response = await fetch(`/inc/checkCoupon?id=45&coupon=${encodedCoupon}`);
    if (response.ok) {
      alert('success');
    } else {
      console.log('优惠券校验失败:', response.statusText);
    }
  } catch (error) {
    console.error('请求出错:', error);
  }
}

4. 排查隐性触发逻辑

虽然你说页面只有这一个校验函数，但还是可以快速排查下：

• 检查输入框是否绑定了其他事件（比如oninput、onblur）；
• 暂时移除页面的第三方脚本（统计、广告等），测试是否还会出现两次请求。

验证方法 #

修改完成后，打开浏览器开发者工具的网络面板，再次输入优惠券码，观察请求：如果只发起一次HTTPS请求且成功返回，就说明问题解决了。

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