HTML页面CORS请求异常：脚本运行正常，按钮触发无请求发送

嘿，这个问题我之前也碰到过！控制台能正常跑但整合到按钮事件就报错，还提示“连接不安全”，大概率是混合内容拦截或者请求上下文的小问题，咱们一步步排查：

最可能的原因：混合内容限制 #

如果你的网页是通过HTTPS加载的，但你请求的CORS接口是HTTP协议，浏览器会直接阻止这个请求——这是浏览器的核心安全策略，防止HTTPS页面加载不安全的HTTP资源。

为啥控制台运行没问题？因为控制台的执行环境比较特殊，浏览器不会对临时的控制台请求做严格拦截，但整合到页面按钮事件里时，就会触发正式的安全检查规则。

解决方法： #

• 优先把目标接口改成HTTPS协议，这是生产环境唯一合规的方案；
• 开发测试时，Firefox可以临时关闭保护：点击地址栏左侧的锁图标 → 「连接安全」→ 「禁用保护」（注意：仅限本地测试，绝对不要在生产环境这么操作）。

检查请求代码的一致性 #

确保按钮事件里的请求代码和你在控制台运行的完全一致：

• 有没有不小心改了接口URL的协议？
• 有没有在按钮事件里添加了额外的请求头（比如自定义Authorization或Content-Type）？如果是这样，会触发CORS预检请求（OPTIONS方法），如果服务端没配置允许预检，也会导致请求失败，但这种情况的错误提示一般是CORS相关，不是“连接不安全”，不过还是要确认下。

举个修正混合内容的代码例子：
原来的错误代码：

document.querySelector('#cors-btn').addEventListener('click', () => {
  // 页面是HTTPS，请求HTTP接口会被拦截
  fetch('http://secret-server/api/resource')
    .then(res => res.json())
    .catch(err => console.error(err));
});

修正后：

document.querySelector('#cors-btn').addEventListener('click', () => {
  // 换成HTTPS协议的接口
  fetch('https://secret-server/api/resource')
    .then(res => res.json())
    .catch(err => console.error(err));
});

查看详细错误日志 #

打开Firefox的开发者工具（F12），切换到「安全」标签页，这里会显示更具体的错误原因，比如明确指出“混合活动内容被阻止”，能帮你快速定位问题。

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