HTTPS页面中fetch请求HTTP接口被浏览器主动拦截，属混合内容（Mixed Content）问题：因安全上下文要求，所有主动型子资源（如fetch、script）必须使用HTTPS协议，否则请求在发出前即被静默阻止，控制台报“Mixed Content”错误且Network面板无记录。
HTTPS 页面无法通过 fetch 请求 HTTP 接口，不是因为跨域，而是浏览器主动拦截的混合内容（Mixed Content）行为。只要主页面是 HTTPS，任何主动型子资源（包括 fetch、XMLHttpRequest、script、iframe、stylesheet）若使用 HTTP 协议，就会被现代浏览器（Chrome、Firefox、Safari）直接阻止，并在控制台报出明确错误。
一眼识别混合内容错误
打开浏览器开发者工具（F12）→ 切换到 Console 标签页，看到类似以下提示，即可确认是混合内容问题：
Mixed Content: The page at 'https://example.com/' was loaded over HTTPS, but requested an insecure resource 'http://api.example.com/data'. This request has been blocked.Blocked loading mixed active content “http://...”
注意关键词：“Mixed Content”、“insecure”、“blocked”。这类报错不会出现在 Network 面板的请求列表中——请求根本没发出，就被浏览器前端策略截断了。
为什么 fetch HTTP 会被拦，但同域名 HTTP 页面能打开？
关键区别在于安全上下文（Secure Context）：
- HTTPS 页面运行在“安全上下文”中，浏览器强制要求所有主动交互资源必须加密传输，否则视为潜在风险（如中间人篡改 API 响应）
- 单独访问
http://api.example.com是普通非安全页面，不触发该限制；但把它作为子资源嵌入 HTTPS 页面时，就破坏了整体安全链路 - 这不是同源策略（Same-Origin Policy）问题——即使协议不同但域名、端口一致，也属于同源，但混合内容拦截发生在更早的网络层，早于 CORS 检查
快速定位 fetch 中的 HTTP 地址
检查代码中所有 fetch() 调用，重点关注：
- 硬编码的 HTTP URL：
fetch('http://api.xxx.com/v1/user') - 拼接生成的 URL，其中 base URL 来自配置或环境变量，而值仍是
http:// - 未做协议适配的网关地址、mock 服务、本地调试地址（如
http://localhost:3001或http://192.168.x.x:8080） - 第三方 SDK 内部发起的请求（例如某些统计、埋点库），需查阅其文档是否支持 HTTPS 自动降级或配置
修复方向：优先确保协议一致
最可靠、最推荐的做法是让后端接口也支持 HTTPS：
- 将
http://api.example.com升级为https://api.example.com（需部署有效 SSL 证书） - 前端代码中统一替换为 HTTPS 地址，或使用相对协议写法：
fetch('//api.example.com/v1/user')（自动继承当前页面协议） - 若后端暂不支持 HTTPS，可考虑反向代理：用 Nginx / Caddy 将
https://your.com/api/代理到内部http://127.0.0.1:8080/，对外始终暴露 HTTPS
不建议依赖 upgrade-insecure-requests CSP 策略来“自动升级”，它仅对 HTML 解析阶段的资源引用（如 <script src>）生效，对 JavaScript 运行时动态调用的 fetch 无效。
