"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 证书：
配置 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 证书的路径。
保存配置文件并重新加载 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 块来定义反向代理规则。例如：
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 如果没有，直接默认/即可。
