https网页加载http资源导致的页面报错及解决方案

最新推荐文章于 2024-07-26 07:02:10 发布
最新推荐文章于 2024-07-26 07:02:10 发布
阅读量1.7k 收藏
点赞数
文章标签： https http web开发 https默认阻止加载http资源
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_41962562/article/details/82215198
版权
在项目中使用Echarts时，发现部署到HTTPS服务器后无法加载图表，因为浏览器默认阻止了HTTP资源的加载。通过将HTTP资源下载到本地并引入，成功解决了该问题。详细步骤包括提取HTTP链接，从浏览器下载资源到项目中，然后按路径引用。这种方法在时间紧迫时提供了解决方案。
摘要由CSDN通过智能技术生成

最近在项目使用百度图表echarts时遇到了这个问题，在本地好好的，部署到线上服务器以后发现无法加载图表，F12查看到网页报错，大意是https默认阻止加载http资源，认为那是不安全的。

参考了前辈的文章，文章中分析了问题的原因，与自己遇到的情况吻合，初步确定问题的原因。

然后尝试用前辈的第2跟第4个轮子解决问题，无果，如果有大神知道怎么用，烦请留言告知，先谢过了。

由于项目比较赶，不想花太多时间研究，先使用自己的方式解决，并记录下来，后续找到原因再补充。

我的解决方案：将http资源直接下载到项目中，跟平常一样引入即可。

一、从原代码中提取链接：

<script type="text/javascript" src="http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js"></script>

二、从浏览器打开http://echarts.baidu.com/gallery/vendors/echarts/echarts.min.js；

三、右键单击，另存为，

最低0.47元/天 解锁文章
wenhu8000
关注
https页面 和 http请求的问题 汇总
FREEDOM
07-02 1万+
https页面中不能使用http请求，http页面中可以使用https请求。关于在https 页面有一些http的请求，可以在&lt;head&gt;&lt;/head&gt;中设置&lt;meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests"&gt;来自动升级http到https，就不需要修改源代...
解决https页面加载http资源报错
前端啤酒屋
08-06 6758
HTTPS（HyperText Transfer Protocol Secure）是一种通过使用SSL/TLS加密通信来保护数据传输的协议，它确保了客户端和服务器之间的安全连接。当HTTPS页面尝试加载非加密的HTTP资源时，如何解决存在的问题？
怎样解决https网页加载http资源报错问题
最新发布
fastboot
07-26 1203
先回顾一下浏览器这一改变历史问题，在Chrome 90以前版本中，浏览器中输入网址后，会先定向至http://连接，而自打Chrome 浏览器 90以后的版本，用户输入网址URL时，如果不加上http://等前缀，浏览器就会默认添加“https://”。 浏览器默认是不允许在HTTPS里面引用HTTP资源的,一般都会弹出提示框,用户确认后才会继续加载,用户体验非常差。而且如果在一个HTTP...
分析https网页加载http资源导致的页面报错原因及其解决方案
Garry
10-12 3905
https网页加载http资源导致的页面报错及解决方案 　　https是当下的网站的主流趋势，甚至像苹果这样的大公司，则完全要求用户必须使用https地址。 　　然而对于以前http链接来说，我们往往就存在一个兼容性问题，因为你不可能一下就全部切换过去，应该在很长一段时间内，https与http将共存。 　　https与http共存的场景有如： 　　　　1. app已经发布出去，其调用接口的地址为http的，那么这是必须兼容的。 　　　　2. app中嵌入...
解决方案：解决https页面加载http资源报错
beautifull001的博客
09-28 4204
在上述示例中，当访问以 /ai 开头的 URL（例如：https://abc.test.com/ai/1.jpg）时，Nginx 将会将这些请求通过代理传递给 http://ai.test.com.预设问题：http://abc.test.com/ai/1.jpg是一个图片资源，在https环境下访问其路径时会产生报错，并且不支持https访问。打开 Nginx 配置文件，通常位于 /etc/nginx/nginx.conf 或 /etc/nginx/conf.d/default.conf。
[跨域问题]使用https调用http接口时,会阻拦的错误提示,解决方案如下
AsiWorld的博客
06-10 7605
问题描述 最近在使用vue做前端,调用后端的登录接口,但是前后端分离+cookie登录状态判断就会产生超级难搞的问题,首当其冲的就是解决安全证书的问题 于是我使用了vue的https devserver选项做了一个非安全证书的https 但是当我调用http登录接口的时候发现报错了 具体内容如下 edge 报错 Mixed Content: The page at ‘https://localhost:8080/’ was loaded over HTTPS, but requested an ins
链接: https://pan.baidu.com/s/1-DgIQmPNwGydAYYwA_fT5w 提取码: pq9q 复制这段内容后打开百度网盘手机App，操作更方便哦
热门推荐
qq_45422535的博客
07-29 232万+
链接: https://pan.baidu.com/s/1-DgIQmPNwGydAYYwA_fT5w 提取码: pq9q 复制这段内容后打开百度网盘手机App，操作更方便哦@TOC 欢迎使用Markdown编辑器 你好！ 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章，了解一下Markdown的基本语法知识。 新的改变...
vue打包静态资源后显示空白及static文件路径报错的解决
10-14
在使用Vue.js框架进行前端开发的过程中，经常需要打包应用以便将其部署到生产环境中。...通过上述的方法，可以较好地解决Vue打包静态资源后页面显示空白和static文件路径报错的问题，提高项目的稳定性和用户体验。
解决vue打包后刷新页面报错：Unexpected token <
10-16
在本案例中，还需要注意的是，错误的具体描述和解决方案应该结合实际的项目版本信息，所以文章中也给出了项目的版本信息，即vue版本是2.5.2，vue-router版本是3.0.1，webpack版本是3.6.0，这些信息对于定位问题和...
https://pan.baidu.com/s/1EpXyBLFpxaIiuTBh0XJiGw
09-25
包含jdk8 及 jdk9 2个版本。 java8的特点：1.速度更快（修改了HasMap、HasSet、CurrentHasMap等存储结构）；2.代码更少（增加了新的语法Lambda表达式）；3.强大的Stream API；4.便于并行；5.最大化减少空指针异常。 JDK9 提供超过 150 项新功能特性，包括备受期待的模块化系统、可交互的 REPL 工具 jshell，以及安全增强、扩展提升、性能管理改善等。
如何把你的http访问的页面转换成ssl支持的https访问
03-04
如何把用http访问的网页转换用https访问关于http，https，SSL的理论不多说，只关注操作面上的技术。环境：Windows 2000 Server组件：IIS5.0, 证书颁发机构（安装windows组件）虚拟目录：http://localhost/kosoft/index.aspx
https访问http加载不出图片_webview加载https链接（终极解决方案，包括https链接加载http图片显示失败）...
weixin_32390647的博客
12-23 3300
前言：只要涉及到https，大家都会第一时间想到证书验证。当然，这是没问题的。如果有要求，这个证书验证是必须的。一般情况下，都是需要证书的(有证书毕竟安全些吗)正常的解决办法：重写类WebViewClient第一种方法：webView.setWebViewClient(new WebViewClient ()@Overridepublic void onReceivedSslError(WebVi...
vue3+vite - 打包编译后页面白屏、CORS跨域、加载js/html文件失败、图片不显示、音视频不显示问题，解决打包生成index.html页面显示空白、找不到资源、报资源跨域打不开报错问题！
高级前端工程师
05-30 5866
vue3，vite，build，打包编译，vite打包后页面白屏，index.html，dist，跨域，CORS报错，图片不显示，资源js加载出错，部署服务器后打开，页面空白，网页不显示，浏览器控制台，全是报错，vite+vue3执行build打包后index.html无法打开怎么办，打不开咋办，啥也不显示，index.html打开空白，打开cors跨域怎么解决，网页上线后一刷新就报错，上线后，typescript，ts，404-Page Not Found，vite build后访问报错，Vite+Vue
https://pan.baidu.com/s/1BeatnW4xBnjc2Pp_azKrgQ
m0_64632940的博客
07-27 3515
https://pan.baidu.com/s/1BeatnW4xBnjc2Pp_azKrgQ
https://pan.baidu.com/s/1zN65F2RcRTGqr62c2zdh0g 提取码：3sjm
qq_42836152的博客
05-04 33万+
https://pan.baidu.com/s/1zN65F2RcRTGqr62c2zdh0g 提取码：3sjm
MySQL高性能索引（视频链接：https://pan.baidu.com/s/1_aGwTIs3hfmhC71e-zkhFg 提取码：j8dr）
jiaodacailei的专栏
05-24 9823
文章目录1.三和一万2.索引原理3.B-Tree索引4.Hash索引5.聚簇索引5.1.数据存储结构5.2.数据查询过程5.3.二级索引的查询过程6.基于索引的sql优化 1.三和一万 索引（在MYSQL中也叫做键），是存储引擎用于快速找到记录的一种数据结构。 索引对查询的速度有着至关重要的影响，理解索引也是进行数据库性能调优的起点。考虑如下情况，假设数据库中一个表有10^6条记录，DBMS的页面...
链接：https://pan.baidu.com/s/1AD_o_i_nzfJdP1UpzKTVwA 提取码：ZMTD
09-04 18万+
链接：https://pan.baidu.com/s/1AD_o_i_nzfJdP1UpzKTVwA 提取码：ZMTD
加载资源很慢且报错Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR /#/block:1 Uncaught (怎么解决
07-23
如果资源加载缓慢并且出现 "Failed to load resource: net::ERR_HTTP2_PROTOCOL_ERROR" 错误，可以尝试以下解决方案： 1. 检查网络连接：确保你的网络连接稳定，并且没有任何代理或防火墙阻止了资源的加载。尝试...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值