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">
相关推荐
Mintopia5 分钟前
Three.js 制作飘摇的草:从基础到进阶的全流程教学
前端·javascript·three.js
BillKu5 分钟前
Vue3父子组件数据双向同步实现方法
前端·javascript·vue.js
红尘散仙24 分钟前
七、WebGPU 基础入门——Texture 纹理
前端·rust·gpu
jaywongX26 分钟前
Base64编码原理:二进制数据与文本的转换技术
前端·javascript·vue
红尘散仙26 分钟前
八、WebGPU 基础入门——加载图像纹理
前端·rust·gpu
佳腾_28 分钟前
【Web应用服务器_Tomcat】一、Tomcat基础与核心功能详解
java·前端·中间件·tomcat·web应用服务器
天天扭码44 分钟前
深入讲解Javascript中的常用数组操作函数
前端·javascript·面试
猿究院_xyz1 小时前
跟着尚硅谷学vue-day5
前端·javascript·vue.js·前端框架·html
小杰love编程1 小时前
Django 入门指南:构建强大的 Web 应用程序
前端·django·sqlite
~heart将心比心1 小时前
chrome://inspect/#devices 调试 HTTP/1.1 404 Not Found 如何解决
前端·chrome