踩坑记录 | HTTPS 页面请求 HTTP 接口被拦截，混合请求引发崩溃🧨
最近部署个人项目时遇到了一件“我本以为我知道”的事。
原本只是想给前端加个 HTTPS，让摄像头权限正常弹出来，结果一操作下来，前端页面的所有请求全都挂了，控制台一片红。最后发现，居然是我自己埋下的坑——HTTPS 页面在偷偷请求 HTTP 接口，直接被浏览器无情拦截。
踩坑的过程不复杂，但背后的知识点却值得好好聊聊。于是，就有了这篇记录
🧩 问题起因
我的项目是前后端分离的 Web 应用，前端基于 Expo 开发。在本地开发调试过程中，一切正常。但将项目部署上线后，我突然发现：
手机浏览器访问时，摄像头权限请求完全弹不出来！
排查一圈之后，我查阅了一些资料，才注意到这一点：
出于安全考虑，浏览器只允许在 HTTPS 页面中请求摄像头、麦克风等敏感权限。
于是，我迅速为前端页面配置了 HTTPS 证书，具体流程可参考我之前写的这篇博客👇：
部署完成后，摄像头权限终于正常弹出了 ✅。然而，好景不长，新的问题立刻出现：
页面中所有的接口请求突然全部失败了
🚨 控制台报错信息
一开始我以为是跨域问题或者接口地址写错了，但细看后发现都不是。
在大模型的指引下，我打开浏览器控制台，看到的错误如下：
Mixed Content: The page at 'https://xxxx.xxxxxxx.com/' was loaded over HTTPS,
but requested an insecure XMLHttpRequest endpoint 'http://xxxxxxxxxxxxx.xxxxxxxx.com/xxx'.
This request has been blocked; the content must be served over HTTPS.
💥 一语惊醒梦中人
🎯 问题原因
简而言之：
前端页面是 HTTPS，后端接口却还是 HTTP。
这就造成了典型的“混合内容（Mixed Content）”问题。浏览器直接封杀了这些请求，连机会都不给。
其中，像 XHR 这种接口请求属于“主动混合内容（Active Mixed Content）”，会被现代浏览器直接拦截掉，哪怕服务端已经响应了，也根本无法返回到前端。
🔧 解决思路
定位问题之后，解决其实很简单：
使用 1Panel 工具 为后端服务也配置上 HTTPS；
将前端代码中所有接口地址全部替换为
https://协议。
✅ 做到这两步之后，接口终于恢复正常，一切顺利运行。
📚 技术背景补充：为什么不能混用 HTTP 和 HTTPS？
很多开发者和我一样，第一次遇到这个问题时会非常困惑，为什么明明能访问的 HTTP 接口，放到 HTTPS 页面中就失效了？这里简单补充一下背景知识。
✅ 什么是 Mixed Content？
Mixed Content 指的是：
HTTPS 页面中加载了不安全的 HTTP 资源。
按类型可以分为：
❌ 为什么它不安全？
中间人攻击风险（MITM）
HTTP 请求内容可以被中途拦截和篡改，攻击者可能插入恶意代码破坏加密链路完整性
本应全程加密的 HTTPS 页面因为加载了 HTTP 内容，造成“破口”误导用户安全感
用户看到锁标志以为页面安全，实则已被嵌入不安全内容
✅ 总结
为了解决摄像头权限无法弹出的问题，我将前端切换为 HTTPS；
没有同步修改接口协议，导致浏览器拦截了所有请求；
后端同样配置 HTTPS，统一前后端协议后，问题顺利解决；
过程中深入了解了“混合内容”问题及其安全机制；
🤔 反思
其实早在之前我就听说过“HTTPS 页面不能请求 HTTP 接口”的问题，看浏览器安全相关的视频时也看到过多次中间人攻击的例子。
但说实话，那时只是“知道”这个知识点，远没有这次部署踩坑来得真切。
🔍 这次经历让我意识到：
安全相关的知识，只有亲手踩过坑、调过 Bug，才真的会刻进脑子里。
同时也提醒自己：
部署上线并不只是功能能跑起来，更要关注协议、权限、环境、浏览器行为等综合因素