修复HTTPS升级后出现 Mixed Content: The page at 'https://xxx' was loaded over HTTPS, but requested an insecure frame 'http://xxx'. This request has been blocked; the content must be served over HTTPS. 的问题

背景

• 由于需要使用摄像头拍照，需要将原来的http升级到https，通过一顿捣鼓，升级成功。
• 不过页面加载出现了问题，具体的提示是说：你的页面是在https环境，但是你访问了一个资源（我这里是iframe，也可能是stylesheet等其他资源），而这个资源是在http环境下的，浏览器不给你这样玩。
• https只能访问https的资源，也因为此修改了接口的baseURL。

解决办法

在nginx 配置中加上 add_header Content-Security-Policy "upgrade-insecure-requests"; 这一条配置即可。

# 让 http 能够自动转发到 https
server {
    listen 80;
    server_name yourdomain.com;

    location / {
        return 301 https://$host$request_uri;
    }
}

server {
    listen 443 ssl;
    server_name yourdomain.com;
    ssl_certificate yourcrt.pem;
    ssl_certificate_key yourkey.pem;
    ssl_session_timeout 5m;

    location / {
        proxy_pass http://127.0.0.1:1234;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        # 加上这条即可 👇
        add_header Content-Security-Policy "upgrade-insecure-requests";
    }
}

为什么HTTPS和HTTP不能混用？

1. 混合内容问题：当一个安全的 HTTPS 页面试图加载非安全的 HTTP 内容时，这种情况被称为“混合内容”。浏览器通常会阻止这种行为，因为它降低了整个页面的安全性。
2. 安全风险：HTTP 内容没有加密，易受中间人攻击。如果在 HTTPS 页面中加载 HTTP 内容，攻击者可能利用这个未加密的内容来攻击整个页面，比如通过注入恶意脚本。
3. 隐私和完整性：HTTPS 旨在保护用户数据的隐私和完整性。混合内容使得 HTTPS 页面的这些保障部分失效，因为嵌入的 HTTP 内容不受同样的保护。
4. 用户信任：用户可能信任一个安全的 HTTPS 页面，如果这个页面包含不安全的内容，这可能误导用户，使他们对整个页面的安全性有错误的理解。

如果实在要混用怎么办？

参考这篇文章：如何在 https 的 iframe 里访问 http 页面？ | nginx应用实战-3
原理就是在服务器访问http拿到页面，然后包装成https再返回来。
其实最好就是原http页面也升级成https，上面的方法是针对原http不是自己写的没法改的情况下。