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

简介: 【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 reloadsudo 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 restartsudo 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 证书。

image.png

第二步:设置Nginx

设置代理也是在这个页面

image.png

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

相关文章
|
1月前
|
XML JSON API
识别这些API接口定义(http,https,api,RPC,webservice,Restful api ,OpenAPI)
本内容介绍了API相关的术语分类,包括传输协议(HTTP/HTTPS)、接口风格(RESTful、WebService、RPC)及开放程度(API、OpenAPI),帮助理解各类API的特点与应用场景。
|
3月前
|
C# 图形学 开发者
Unity开发中使用UnityWebRequest从HTTP服务器下载资源。
总之,UnityWebRequest就是游戏开发者手中的万能钓鱼竿,既可以获取文本数据,也能钓上图片资源,甚至是那声音的涟漪。使用UnityWebRequest的时候,你需要精心准备,比如确定URL、配置请求类型和头信息;发起请求;巧妙处理钓获的数据;还需要机智面对网络波澜,处理各种可能出现的错误。按照这样的过程,数据的钓取将会是一次既轻松愉快也效率高效的编程钓鱼之旅。
188 18
|
3月前
|
安全 Linux 定位技术
Curl访问Kerberos SPNEGO保护的HTTP资源
最后,记住,虽然Kerberos的魔法强大且久经考验,但它仍需你谨慎掌握。SPNEGO的舞步看似复杂,但一旦跳起来,你会发现自己在安全和便捷的旋律中翩翩起舞。而Curl,这一灵活敏捷的小工具,它的确有能力成为你施展这些魔法的得力助手。
88 14
|
3月前
|
安全 网络安全 数据安全/隐私保护
网页安全演进:HTTP、HTTPS与HSTS
这整个进程实质上是网页安全由“裸奔”到“穿衣”再到“绑带”的演变史。它保障了数据的机密性和完整性,降低了中间人攻击的风险,最终实现了更自由、更安全的网络环境。但别忘了,技术永远在发展,网络安全的赛跑也永无终点。*ENDPOINT*
257 11
|
4月前
|
安全 网络协议 Linux
Linux网络应用层协议展示:HTTP与HTTPS
此外,必须注意,从HTTP迁移到HTTPS是一项重要且必要的任务,因为这不仅关乎用户信息的安全,也有利于你的网站评级和粉丝的信心。在网络世界中,信息的安全就是一切,选择HTTPS,让您的网站更加安全,使您的用户满意,也使您感到满意。
134 18
|
4月前
|
JSON 安全 网络协议
HTTP/HTTPS协议(请求响应模型、状态码)
本文简要介绍了HTTP与HTTPS协议的基础知识。HTTP是一种无状态的超文本传输协议,基于TCP/IP,常用80端口,通过请求-响应模型实现客户端与服务器间的通信;HTTPS为HTTP的安全版本,基于SSL/TLS加密技术,使用443端口,确保数据传输的安全性。文中还详细描述了HTTP请求方法(如GET、POST)、请求与响应头字段、状态码分类及意义,并对比了两者在请求-响应模型中的安全性差异。
379 20
|
4月前
|
安全 网络协议 算法
HTTP/HTTPS与SOCKS5协议在隧道代理中的兼容性设计解析
本文系统探讨了构建企业级双协议隧道代理系统的挑战与实现。首先对比HTTP/HTTPS和SOCKS5协议特性,分析其在工作模型、连接管理和加密方式上的差异。接着提出兼容性架构设计,包括双协议接入层与统一隧道内核,通过协议识别模块和分层设计实现高效转换。关键技术部分深入解析协议转换引擎、连接管理策略及加密传输方案,并从性能优化、安全增强到典型应用场景全面展开。最后指出未来发展趋势将更高效、安全与智能。
169 1
|
5月前
|
安全 网络安全 数据安全/隐私保护
HTTP 与 HTTPS 协议及 SSL 证书解析-http和https到底有什么区别?-优雅草卓伊凡
HTTP 与 HTTPS 协议及 SSL 证书解析-http和https到底有什么区别?-优雅草卓伊凡
287 3
|
4月前
|
Web App开发 前端开发 JavaScript
鸿蒙5开发宝藏案例分享---Web适配一多开发实践
这是一份实用的鸿蒙Web多设备适配开发指南,针对开发者在不同屏幕尺寸下的布局难题提供了解决方案。文章通过三大法宝(相对单位、媒体查询和窗口监听)详细介绍如何实现智能适配,并提供了多个实战案例,如宫格布局、对话框变形和自适应轮播图等。此外,还分享了调试技巧及工具推荐,帮助开发者快速上手并优化性能。最后鼓励读者实践探索,并提示更多官方资源等待发现。
|
6月前
|
关系型数据库 MySQL 数据库
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!
TIS 是一款基于Web-UI的开源大数据集成工具,通过与人大金仓Kingbase的深度整合,提供高效、灵活的实时数据集成方案。它支持增量数据监听和实时写入,兼容MySQL、PostgreSQL和Oracle模式,无需编写复杂脚本,操作简单直观,特别适合非专业开发人员使用。TIS率先实现了Kingbase CDC连接器的整合,成为业界首个开箱即用的Kingbase CDC数据同步解决方案,助力企业数字化转型。
1153 5
基于Flink CDC 开发,支持Web-UI的实时KingBase 连接器,三大模式无缝切换,效率翻倍!