https服务器访问http资源报Mixed Content混合内容错误

1 报错内容

Mixed Content: The page at 'https://xxx' was loaded over HTTPS, but requested an insecure XMLHttpRequest endpoint 'http://xxx'. This request has been blocked; the content must be served over HTTPS.

2 报错原因

页面通过 HTTPS 加载,但是尝试通过 XMLHttpRequest 请求一个 HTTP 资源。现代浏览器为了安全考虑,默认会阻止这种不安全的请求,报混合错误,这篇文章给出前端的解决方式。

3 解决方式

我这个报错是vue项目中出现的,找到这个项目的index.html文件,在headl里加上以下内容,然后生产环境就能正常访问了:

html 复制代码
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests">
相关推荐
源码云商39 分钟前
【带文档】网上点餐系统 springboot + vue 全栈项目实战(源码+数据库+万字说明文档)
数据库·vue.js·spring boot
!win !1 小时前
uni-app小程序登录后…
前端·uni-app
Nightne1 小时前
CSS图片垂直居中问题解决方案
前端·css
魔术师ID1 小时前
vue 指令
前端·javascript·vue.js
凌冰_1 小时前
CSS3 变形
前端·css·css3
GISer_Jing2 小时前
前端图形渲染 html+css、canvas、svg和webgl绘制详解,各个应用场景及其区别
前端·html·图形渲染
零凌林2 小时前
使用exceljs将excel文件转化为html预览最佳实践(完整源码)
前端·html·excel·vue3·最佳实践·文件预览·exceljs
二十雨辰2 小时前
[CSS3]属性增强1
前端·css·css3
smileNicky3 小时前
在 VSCode 中运行 Vue.js 项目
ide·vue.js·vscode
waterHBO4 小时前
直接从图片生成 html
前端·javascript·html