https页面加载http资源报错解决方案

更新日期: 2021-10-22阅读: 2.4k标签: http

改https初看起来,其实就是一个域名指向的问题,也许咱们只要将http的请求,直接跳转到https地址去,那么也就完成了https的切换。实际并非这么简单的。

由于https地址中,若是加载了http资源,浏览器将认为这是不安全的资源,将会默认阻止,这就会给你带来资源不全的问题了,好比:图片显示不了,样式加载不了,JS加载不了。由于样式类,基本上都是写在本地的,因此通常还能够,可是一些公共的js文件,每每就是存在于cdn或者其余服务器上,这时候,若是访问不了,可能就致使了业务就彻底操做不了。好比:jquery效法加载失败,可能全部的操做、请求都将无效了。

如果一个https网站中的某个页面内容加载时请求了有js、css、图片和接口四个http协议的资源。就会出现报错信息:

module.exports = Config[Fix];
Mixed Content: The page at 'https://www.fly63.com/***/' was loaded over HTTPS,
but requested an insecure image 'http://www.fly63.co/***/img.jpg'.
This content should also be served over HTTPS.

这是由于HTTPS 是 HTTP over Secure Socket Layer,以安全为目标的 HTTP 通道,所以在 HTTPS 承载的页面上不允许出现 http 请求,一旦出现就是提示或报错。下面总汇几种解决方案,供大家参考。


方法1:服务端设置header

好在 W3C 工作组考虑到了我们升级 HTTPS 的艰难,在 2015 年 4 月份就出了一个 Upgrade Insecure Requests 的草案,他的作用就是让浏览器自动升级请求。
在我们服务器的响应头中加入:(当然如果操作不了服务器,下面还会介绍另一种解决办法)

header("Content-Security-Policy: upgrade-insecure-requests");


方法2:页面设置meta头

在页面中加入 meta 头:(我使用这个方法)

<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />

如果页面比较多,需要统一改变的话,我们可以将这条语句添加到全局JS文件里,全局调用。


方法三:删除链接中的http:

推荐方法,不指定具体协议,使用资源协议自适配,比如,当前为https页面,那么就是https资源,如果是http页面,那么就是http资源。具体方法超简单:

<script src='//cdn.bootcss.com/jquery/3.3.1/jquery.min.js'></script>


方式四:

最笨的方法,直接复制原有代码,写成两套代码,一套为http使用,一套为https使用,http和https各自指向各自服务。


链接: https://fly63.com/article/detial/10754

HTTPS 常见部署问题及解决方案

到任何有关部署 HTTPS 或 HTTP/2 的问题,都推荐先用 Qualys SSL Labs SSL Server Test 跑个测试,大部分问题都能被诊断出来。

HTTP请求头和响应头部包括的信息有哪些【HTTP请求头各字段解释】

每个HTTP请求和响应都会带有相应的头部信息。默认情况下,在发送XHR请求的同时,还会发送下列头部信息: Accept、Accept-Charset、Accept-Encoding、Connection、Host

服务器响应常用状态码及含义_ajax请求中http返回的状态码大全

HTTP状态码是用以表示网页服务器HTTP响应状态的3位数字代码,其中第一位数字表示响应类别,响应类别从1到5分为五种,分别代表:临时响应、成功、重定向、请求错误、服务器错误。

HTTPS 如何保证数据传输的安全性

在客户端与服务器数据传输的过程中,HTTP协议的传输是不安全的,也就是一般情况下HTTP是明文传输的。但HTTPS协议的数据传输是安全的,也就是说HTTPS数据的传输是经过加密的

http协议的发展历史

在最早的时候,第一个定稿的http协议是http/0.9版本,在这个版本里面,http协议,它的内容,非常非常的简单 只有一个命令。http协议的历史,其中当然还有https,https是http的安全版本,它实际使用的内容跟http/1.1没有很大的区别

axios 模块化封装_对axios的二次封装的实现

Axios 是一个基于 promise 的 HTTP 库 ,使用了axios来进行数据的请求,一般都需要我们对它进行封装处理。下面简单介绍下如何对axios的二次封装的实现,以及在vue中的使用。

HttpClient的3种超时

设置ConnectionPoolTimeout:这定义了从ConnectionManager管理的连接池中取出连接的超时时间,此处设置为1秒。设置ConnectionTimeout:这定义了通过网络与服务器建立连接的超时时间。Httpclient包中通过一个异步线程去创建与服务器的socket连接

HTTP 请求头中的 Remote_Addr,X-Forwarded-For,X-Real-IP

X-Forwarded-For一般是每一个非透明代理转发请求时会将上游服务器的IP地址追加到X-Forwarded-For的后面,使用英文逗号分割;X-Real-IP一般是最后一级代理将上游IP地址添加到该头中;X-Forwarded-For是多个IP地址,而X-Real-IP是一个

HTTP协议中的短轮询、长轮询、长连接和短连接

HTTP协议是基于请求/响应模式的,因此只要服务端给了响应,本次HTTP连接就结束了,根本没有长连接这一说。网络上说HTTP分为长连接和短连接,其实本质上是说的TCP连接。TCP连接是一个双向的通道,它是可以保持一段时间不关闭的,因此TCP连接才有真正的长连接和短连接这一说。

常见HTTP请求错误码

一些常见的状态码为:200 - 服务器成功返回网页;404 - 请求的网页不存在;503 - 服务不可用。1xx(临时响应):表示临时响应并需要请求者继续执行操作的状态代码。2xx (成功):表示成功处理了请求的状态代码。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!