升级https后解决http资源文件访问被阻止

0 点赞

0 条评论

3354 次浏览

发布于 2021-10-25 18:07

在升级https后直接用ajax跨域请求返回数据因为不是https协议网站返回的数据或资源所以会被拦截阻挡

Mixed Content: The page at 'https://example.com' was loaded over HTTPS, but requested an insecure stylesheet 'http://example.com/static/css/example.css'. This request has been blocked; the content must be served over HTTPS.

该错误是说浏览器的同一页面下不能即访问https协议，又访问http协议，这时候请求直接会被浏览器拦截。

解决办法

//解决 https调用 http
var protocol = window.location.protocol;
if (protocol.includes("https:")) {
	var metaTag = document.createElement("meta");
	metaTag.httpEquiv = "Content-Security-Policy";
	metaTag.content = "upgrade-insecure-requests";
	document.getElementsByTagName("head")[0].appendChild(metaTag);
}

当然也可以通过在网页 head 中添加标签

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

或者在nginx上面添加header

location / {
	...
	add_header Content-Security-Policy upgrade-insecure-requests;
	...
}

其他后端语言也可以参照nginx的配置来进行修改

版权所属:开发日记

原文地址:https://www.mingdev.com/article/f3b12e4a

转载时必须以链接形式注明原始出处及本声明。

"赞助我们，我们才能做的更多&更好"

赞助支持

还没有评论

写下你的评论...

最热文章

解决flvJs报 Failed to execute ‘appendBuffer’ on ‘SourceBuffer’的错误

8890 浏览 · 0 评论

使用dart-sass替换node-sass

6215 浏览 · 0 评论

浏览器后退跳转到指定的页面

4703 浏览 · 0 评论

好玩的CSS3（3）-- 翻转（旋转正反两张）图片

4696 浏览 · 0 评论

pc端常用电脑屏幕分辨率尺寸适配

4645 浏览 · 0 评论

Flutter适配夜间模式

4348 浏览 · 0 评论