为什么本地开发时 HTTPS 请求会被浏览器拦截？

Zz玉鑫提问于 2026-03-12 03:23:19 阅读 23

前端

我在本地用 http://localhost:3000 开发一个前端项目，调用公司测试环境的 HTTPS 接口时，浏览器直接报错说“Mixed Content”，请求根本发不出去。明明接口地址是 https://api.test.example.com 啊，怎么还混用了？

我试过在 Chrome 启动时加 --allow-running-insecure-content 参数，但新版好像也不管用了。难道本地开发必须配 HTTPS 证书才行？有没有更简单的办法绕过这个问题？

我来解答赞 7 收藏

反馈

1 条解答

一可的笔记 Lv1

这个问题其实不复杂，就是浏览器的 Mixed Content 策略在搞鬼。

当你页面跑在 http://localhost:3000 上，去请求 https://api.test.example.com 时，浏览器会认为这是"混合内容"——你的页面本身是不安全的 HTTP，凭什么让我安全地请求 HTTPS 接口？对于脚本、AJAX、Fetch 这类"主动"请求，浏览器是直接拦截的。

那个 --allow-running-insecure-content 参数确实不太管用了，现在浏览器对这个限制越来越严。

最简洁的解决方案是：别让浏览器觉得你页面是 HTTP 的。

方案一：用 vite 或 webpack 的代理功能（推荐）

在你的开发服务器配置里，把请求代理到后端接口。这样前端代码里请求的还是同域的接口，比如 /api/xxx，浏览器不会认为是混合内容。

如果用 Vite，配置一下 vite.config.js：

export default defineConfig({

  server: {

    proxy: {

      '/api': {

        target: 'https://api.test.example.com',

        changeOrigin: true,

      }

    }

  }

})

然后代码里直接写 fetch('/api/xxx') 就行，浏览器根本不知道你实际请求的是外部 HTTPS 接口。

方案二：本地自签证书（稍微折腾一点）

用 mkcert 工具生成本地可信的证书，让你的 localhost 直接跑在 HTTPS 上。这样请求同协议的 HTTPS 接口就不会触发混合内容警告。

方案三：让后端允许跨域

如果你们后端配置了 CORS 且允许 http://localhost:3000，其实理论上可行，但 Mixed Content 是浏览器层面的限制，跟 CORS 是两码事，所以这个方案基本没用。

综上，方案一是最省事的，改动最小，几乎所有项目都能直接用。

2026-03-12 04:00