【WEB】当HTTPS资源引入HTTP导致报错blocked:mixed-content （混合加载/Mixed Content）如何解决

"blocked:mixed-content" 是一个安全性警告，表示当前页面加载的资源存在混合内容（Mixed Content）。

混合加载介绍

我们可以稍微了解下这个错误是如何出现的。
混合内容指的是同时使用了安全的 HTTPS协议和不安全的HTTP 协议加载的网页内容。在使用 HTTPS 加密连接的网站中，浏览器会阻止加载非安全的 HTTP 资源，以确保用户数据的安全性和完整性。

要解决 "blocked:mixed-content" 警告，有以下几个步骤可以尝试：

1. 检查页面中加载的资源（如图片、脚本、样式表等），确保它们都使用了 HTTPS 协议进行加载。将所有的 HTTP 链接替换为对应的 HTTPS 链接。
2. 如果你无法控制某些资源的加载方式（例如由其他网站提供的第三方资源），可以尝试使用该资源的 HTTPS 版本（如果提供的话），或者寻找可替代的资源。
3. 在服务器端进行配置，启用 HTTPS，并确保所有资源通过HTTPS 加密协议进行访问。
4. 检查浏览器控制台输出的详细错误信息，以便更好地定位混合内容的来源和具体原因。

解决办法

一般情况下，如果我们使用的是第三方接口服务，或者是不太好操作的服务。想把他变为https不是很容易的。这个时候我推荐一个方法。
首先我们需要有一个二级域名，注意。这个域名的数量取决于你有几个需要处理的API服务。

例如：我们的二级域名是 xxx-api.zcsuper.cn 服务地址为 http://127.1.1.17:8080

Linux解决

第一步：开启SSL

因为我们要设置Nginx代理，所以提前开启下SSL证书，同时要为 top-api.zcsuper.cn 域名使用 Let's Encrypt 的 SSL 证书，并开启强制 HTTPS 跳转

1. 安装 Certbot：

   • 在 Linux 上，可以使用 Certbot 工具来获取和管理 Let's Encrypt 的 SSL 证书。根据你的 Linux 发行版，使用适当的命令来安装 Certbot。

2. 获取 SSL 证书：

   • 运行 Certbot 命令来获取 SSL 证书，并按照提示提供必要的信息。通常，命令类似于：

     sudo certbot certonly --nginx -d yourdomain.com
     

     这将会与 Nginx 进行交互并获取证书。

3. 配置 Nginx 使用 SSL 证书：

   • 打开 Nginx 的配置文件，在 server 块中添加 SSL 配置项。例如：

     server {
            
            
         listen 80;
         server_name top-api.zcsuper.cn;
         return 301 https://{
            
            mathJaxContainer[0]}request_uri;
     }
     
     server {
            
            
         listen 443 ssl;
         server_name top-api.zcsuper.cn;
     
         ssl_certificate /etc/letsencrypt/live/top-api.zcsuper.cn/fullchain.pem;
         ssl_certificate_key /etc/letsencrypt/live/top-api.zcsuper.cn/privkey.pem;
     
         root /var/www/html;
         index index.html;
     
         location / {
            
            
             try_files {
            
            mathJaxContainer[1]}uri/ =404;
         }
     }
     

     这个配置中，我们添加了一个监听 443 端口的 server 块，并指定了 SSL 证书的路径。

4. 保存配置文件并重新加载 Nginx：

   • 保存修改后的配置文件。
   • 使用命令重新加载 Nginx：sudo service nginx reload 或 sudo systemctl reload nginx。

第二步：设置Nginx

最后一步配置
要给 top-api.zcsuper.cn 设置反向代理为 http://127.1.1.17:8080，你可以按照以下步骤进行操作：

1. 打开 Nginx 配置文件：

   • 通常，Nginx 的配置文件位于 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/ 目录下。

2. 在配置文件中添加反向代理配置：

   • 在合适的位置，添加一个新的 server 块来定义反向代理规则。例如：

     server {
            
            
         listen 80;
         server_name top-api.zcsuper.cn;
     
         location / {
            
            
             proxy_pass http://127.1.1.17:8080;
             proxy_set_header Host $host;
             proxy_set_header X-Real-IP $remote_addr;
         }
     }
     

     这个配置将会将所有请求发送到 http://127.1.1.17:8080。

3. 保存配置文件并重启 Nginx：

   • 保存修改后的配置文件。
   • 使用命令重启 Nginx：sudo service nginx restart 或 sudo systemctl restart nginx。

4. 配置 DNS 解析：

   • 打开 DNS 管理界面（可能是域名注册商提供的管理界面）。
   • 添加一个新的 CNAME 记录，将 top-api.zcsuper.cn 指向你的服务器 IP 地址。

完成以上步骤后，top-api.zcsuper.cn 将会被设置为反向代理，将请求转发到 http://127.1.1.17:8080。
这个时候你的https可以直接请求https://top-api.zcsuper.cn了，这样就不会出现问题

宝塔面板解决

宝塔的操作就相对简单很多了。

第一步：开启SSL

1. 登录宝塔面板：

   • 打开你的宝塔面板登录页面，并使用管理员账户登录。

2. 添加网站：

   • 在宝塔面板中，点击左侧菜单中的「网站」选项，然后点击「添加站点」按钮。
   • 填写网站相关信息，包括域名、网站目录等，然后点击「提交」按钮完成网站添加。

3. 开启 SSL 功能：

   • 在宝塔面板中，找到刚才添加的网站，点击网站对应行右侧的「设置」按钮。
   • 在设置页面中，找到「SSL」选项卡，然后点击「申请」按钮。

4. 配置 SSL 证书：

   • 在 SSL 设置页面中，选择「Let's Encrypt」作为 SSL 证书的类型。
   • 如果需要为所有子域名也申请 SSL 证书，请勾选「保护所有子域名（通配符）」选项。
   • 点击「提交」按钮来申请并安装 Let's Encrypt 的 SSL 证书。

5. 完成配置：

   • 等待证书申请和安装的过程完成，宝塔面板会自动为你的网站配置好 SSL 证书。
   • 之后，你的网站将通过 HTTPS 进行访问，并且浏览器会显示已经使用了有效的 Let's Encrypt 证书。

第二步：设置Nginx

设置代理也是在这个页面

有个注意的点就是代理目录 一般来说有的人接口可能是http://127.1.1.17:8080/api/getList等，/api这个在每一个请求地址都会出现，那么我们就设置为/api 如果没有，直接默认/即可。