HTTPS下静态网站CSS及JS失效，HTTP正常问题排查咨询

我来帮你梳理下几种常见的导致HTTPS环境下CSS/JS失效、HTTP正常的原因，以及对应的排查方法：

• 服务器HTTPS与HTTP的根目录配置不一致
  很多时候，HTTP和HTTPS服务的站点根目录可能被配置到了不同路径，或者静态资源的映射规则在HTTPS下没有同步。你可以直接在浏览器地址栏访问HTTPS下的某份CSS文件，比如https://你的域名/assets/css/style.css，如果返回404错误，那基本就是服务器路径配置的问题，需要检查你的Web服务器（Nginx/Apache等）的HTTPS站点配置，确保静态资源目录和HTTP环境一致。

• SSL证书或资源完整性校验问题
  如果你的SSL证书是自签名、过期，或者不被浏览器信任，浏览器会出于安全策略阻止加载部分静态资源。另外，有些服务器会强制要求静态资源配置子资源完整性（SRI），如果你的<link>标签没有添加integrity和crossorigin属性，也可能被拒绝加载。你可以打开浏览器开发者工具（F12）的Console标签，查看是否有类似NET::ERR_CERT_AUTHORITY_INVALID或Failed to find a valid digest的错误提示。

• 内容安全策略（CSP）的限制
  HTTPS环境下很多站点会启用更严格的CSP规则，可能无意中拦截了本地静态资源的加载。你可以在开发者工具的Network标签里查看资源请求状态，如果显示blocked，那大概率是CSP的问题。检查页面的<meta>标签里是否有Content-Security-Policy配置，或者服务器返回的响应头中是否包含该字段，看看是否限制了self源的资源加载。

• 浏览器缓存的遗留冲突
  浏览器可能缓存了HTTP环境下的资源，切换到HTTPS后，缓存的资源路径或协议可能和当前环境冲突，导致加载失败。你可以尝试清除浏览器缓存，或者用隐私/无痕模式打开HTTPS页面，看看资源是否能正常加载。

• CSS内部的隐藏混合内容
  虽然你用了相对路径引用CSS，但如果CSS文件内部通过url()引用了http://开头的资源（比如背景图、字体文件），这属于被动混合内容，现代浏览器会自动阻止这类资源加载，进而导致CSS样式失效。你可以在开发者工具的Console里查看是否有Mixed Content的警告，或者直接检查CSS文件中的url()引用。

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