浏览器报错：Mixed Content：The page at ... ​

问题 ​

在访问页面时出现类似如下错误：

Mixed Content: The page at 'https://mydomain.com' was loaded over HTTPS, but requested an insecure stylesheet 'http://mydomain.com'. This request has been blocked. the content must be served over HTTPS.

原因 ​

这主要是因为浏览器的安全机制，阻止在 HTTPS 的站点中加载 HTTP 协议的资源。

解决方案 1： ​

在 HTML 内容中加上下面这段 meta 标签，自动将 HTTP 请求升级为 HTTPS：

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

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

解决方案 2： ​

在服务器的响应头中加上："Content-Security-Policy: upgrade-insecure-requests"。

以 Nginx 为例：

location / {
  add_header Content-Security-Policy: "upgrade-insecure-requests";
}

location / {
  add_header Content-Security-Policy: "upgrade-insecure-requests";
}

References ​

MDN: Mixed content

W3C: Mixed Content