Mixed Content报错无法定位不安全资源控制台与Network面板信息不符

云原生阿岚

2026-10-1

排查思路

优先排查代码硬编码问题：全局检索项目中所有接口地址配置，包括请求库baseUrl、单个接口的路径拼接逻辑，是否存在写死http://api.yhat.pub的情况。浏览器混合内容拦截在请求发起瞬间触发，如果原始请求地址是http，哪怕后续有301/302跳转至https，也会先触发拦截。Network面板默认只会展示最终成功发出的https请求，因此会出现“能看到https请求但还是报错”的矛盾情况，被拦截的原始http请求不会在面板中展示。
检查服务端/反向代理配置：确认api域名的反向代理（如Nginx、CDN）是否存在错误跳转逻辑，比如先跳转http再跳转https；同时检查反向代理是否正确传递了X-Forwarded-Proto请求头，避免后端服务错误识别请求协议，返回带http前缀的资源地址。
检查页面安全配置：查看Flutter Web的web/index.html文件中是否有异常的Content-Security-Policy配置，或者遗漏了不安全请求升级的相关规则。

解决方案

将所有代码中硬编码的http接口地址统一替换为https，不要使用//api.yhat.pub这类协议相对地址，避免特殊场景下被错误解析为http协议。
在web/index.html的head标签中加入强制升级不安全请求的meta规则，浏览器会自动把页面内所有http请求升级为https发起：

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">

为api域名配置HSTS规则，强制浏览器后续对该域名的所有请求都直接使用https，不需要再走服务端跳转。以Nginx配置为例：

add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
# 强制所有http请求跳转至https
if ($scheme != "https") {
    return 301 https://$host$request_uri;
}
# 正确传递请求协议给后端服务
proxy_set_header X-Forwarded-Proto $scheme;