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

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

混合加载介绍

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

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

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

解决办法

一般情况下，如果我们使用的是第三方接口服务，或者是不太好操作的服务。想把他变为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 跳转

安装 Certbot：
- 在 Linux 上，可以使用 Certbot 工具来获取和管理 Let's Encrypt 的 SSL 证书。根据你的 Linux 发行版，使用适当的命令来安装 Certbot。
获取 SSL 证书：
- 运行 Certbot 命令来获取 SSL 证书，并按照提示提供必要的信息。通常，命令类似于：
  cmd 复制代码
```
sudo certbot certonly --nginx -d yourdomain.com
```
  这将会与 Nginx 进行交互并获取证书。

配置 Nginx 使用 SSL 证书：

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

python 复制代码

server {
    listen 80;
    server_name top-api.zcsuper.cn;
    return 301 https://$host$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 $uri $uri/ =404;
    }
}

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

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

第二步：设置Nginx

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

打开 Nginx 配置文件：
- 通常，Nginx 的配置文件位于 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/ 目录下。
在配置文件中添加反向代理配置：
- 在合适的位置，添加一个新的 server 块来定义反向代理规则。例如：
  nginx 复制代码
```
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。
保存配置文件并重启 Nginx：
- 保存修改后的配置文件。
- 使用命令重启 Nginx：sudo service nginx restart 或 sudo systemctl restart nginx。
配置 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

登录宝塔面板：
- 打开你的宝塔面板登录页面，并使用管理员账户登录。
添加网站：
- 在宝塔面板中，点击左侧菜单中的「网站」选项，然后点击「添加站点」按钮。
- 填写网站相关信息，包括域名、网站目录等，然后点击「提交」按钮完成网站添加。
开启 SSL 功能：
- 在宝塔面板中，找到刚才添加的网站，点击网站对应行右侧的「设置」按钮。
- 在设置页面中，找到「SSL」选项卡，然后点击「申请」按钮。
配置 SSL 证书：
- 在 SSL 设置页面中，选择「Let's Encrypt」作为 SSL 证书的类型。
- 如果需要为所有子域名也申请 SSL 证书，请勾选「保护所有子域名（通配符）」选项。
- 点击「提交」按钮来申请并安装 Let's Encrypt 的 SSL 证书。
完成配置：
- 等待证书申请和安装的过程完成，宝塔面板会自动为你的网站配置好 SSL 证书。
- 之后，你的网站将通过 HTTPS 进行访问，并且浏览器会显示已经使用了有效的 Let's Encrypt 证书。

第二步：设置Nginx

设置代理也是在这个页面

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