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">
相关推荐
袁煦丞15 分钟前
2025.8.18实验室【代码跑酷指南】Jupyter Notebook程序员的魔法本:cpolar内网穿透实验室第622个成功挑战
前端·程序员·远程工作
Joker Zxc20 分钟前
【前端基础】flex布局中使用`justify-content`后,最后一行的布局问题
前端·css
无奈何杨23 分钟前
风控系统事件分析中心,关联关系、排行、时间分布
前端·后端
Moment29 分钟前
nginx 如何配置防止慢速攻击 🤔🤔🤔
前端·后端·nginx
晓得迷路了34 分钟前
栗子前端技术周刊第 94 期 - React Native 0.81、jQuery 4.0.0 RC1、Bun v1.2.20...
前端·javascript·react.js
前端小巷子36 分钟前
Vue 自定义指令
前端·vue.js·面试
玲小珑41 分钟前
Next.js 教程系列(二十七)React Server Components (RSC) 与未来趋势
前端·next.js
Mike_jia42 分钟前
UptimeRobot API状态监控:零成本打造企业级业务健康看板
前端
江城开朗的豌豆43 分钟前
React状态更新踩坑记:我是这样优雅修改参数的
前端·javascript·react.js
CodeSheep1 小时前
Stack Overflow,轰然倒下了!
前端·后端·程序员