ajax请求报错(blocked:mixed-content)

最新推荐文章于 2025-06-20 11:50:43 发布
最新推荐文章于 2025-06-20 11:50:43 发布
阅读量1.8w 收藏
点赞数 1
CC 4.0 BY-SA版权
分类专栏： BUG集合
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/yiyueqinghui/article/details/84993009
本文探讨了在HTTPS页面中使用AJAX发起HTTP请求时遇到的mixed-content错误，并提供了将HTTP域名升级到HTTPS的解决方案。

ajax请求报错(blocked:mixed-content)

原因：
https页面去发送http请求报错(浏览器阻止https发送http请求)
解决：
把域名（http）绑定证书（https）

JSONP请求报错block:mixed-content（已解决）
卡卡西：一个擅长拷贝的前端程序员
03-11 1769
Mixed Content: The page was loaded over HTTPS，blocked the content must be served over HTTPS 问题描述 开发环境 调用接口 正常，发布到测试环境时，调用接口提示 “block:mixed-content” 问题原因 浏览器不允许在https页面里嵌入http的请求 开发环境是本地起的http服务，发到测试环境时是 https，而调用的接口地址是固定的 http接口，导致测试环境报错。 解决问题 方法1. 如果该接口支持
【异常】 AJAX 跨域请求报：No ‘Access-Control-Allow-Origin‘ header is present on the requested resource
weixin_48618536的博客
01-15 1179
本地环境下，直接打开html文件，用AJAX 方法`jQuery load() `加载**txt文件**时，报错如下：
前端请求后端接口报错(blocked:mixed-content)，以及解决办法
10-29 3331
出现这个错误的原因是，您的前端应用可能正在尝试加载一个HTTP资源，而该资源应该通过HTTPS协议进行传输。由于HTTP协议是不安全的，它可能会被中间人攻击（Man-in-the-Middle Attack）拦截，导致数据泄露或恶意修改。因此，浏览器默认阻止了这种不安全的请求。混合内容是指在同一页面中同时包含安全（HTTPS）和非安全（HTTP）资源的情况。当浏览器试图加载非安全资源时，它会发出“混合内容”警告，阻止加载不安全的请求。为什么会出现“blocked:mixed-content”错误？
页面js,css文件请求显示blocked:devtools问题
m0_63986651的博客
06-20 549
打开浏览器的Network request blocking,将Enable network request blocking的选项给关闭掉。触发:打开了开发者工具(f12)后,静态文件请求失败,但关闭后却恢复正常。
web无插件直播点播视频结构化分析系统EasyDSS开启https报错 (blocked:mixed-content) 问题
EasyDSS官方技术博客
03-29 397
TSINGSEE青犀视频的大部分视频平台都是能够开启https的，在EasyDSS的部分版本中，如果开启 https，通过 https访问http 地址，浏览器的控制台会报出(blocked:mixed-content)错误： 出现该种错误是浏览器的默认功能，如果在 https 端口的网站访问 http 的地址就会出现错误。https 地址相对于http地址来说，安全性更强，因此 https 在渐渐的取代 http。 出现该种情况，需要修改软件后端，对访问的路径进行判断，如果是 https 访问
浏览器访问网址出现blocked：mixed-content问题
Blz624613442的博客
08-29 5196
最近有个别同事提出浏览器通过域名访问内部系统时，出现网络错误，无法登录内部系统，但其他同事仍然正常的，并无不妥。通过对他们浏览器运行检查时发现，网络状态报(Chrome下会显示已屏蔽再对访问路径仔细对比发现出现问题的同事，都使用了https进行访问，更改为http访问后恢复正常。
Chrome插件请求数据时 请求报错(blocked:mixed-content)
04-23 8836
Chrome插件请求数据时请求报错（blocked:mixed-content）问题原因解决方案方案1：配置https方案1：使用background.js请求http 问题原因 问题原因是我在csdn上搜索到的，主要原因为https页面去发送http请求报错(浏览器阻止https发送http请求) 解决方案 方案1：配置https 将请求的服务器添加openssl扩展，使服务器支持https。该...
浏览器（已屏蔽：mixed-content）
起风了
12-24 1796
访问接口出现：已屏蔽：mixed-content
https请求报错block:mixed-content问题的解决办法（已解决）
12-21
标题中的“https请求报错block:mixed-content问题的解决办法（已解决）”是指在使用HTTPS安全协议的网站中，由于加载了HTTP不安全的资源，导致浏览器出现“混合内容”（Mixed Content）错误的问题。这个问题通常发生...
blocked:mixed-content
03-16
blocked:mixed-content指的是浏览器在加载网页时，发现网页中同时包含了安全的HTTPS协议和不安全的HTTP协议的内容，为了保证网页的安全性，浏览器会阻止这些不安全的内容加载，从而保护用户的隐私和安全。
vue2 - 解决elementUI使用el-radio单选组件报错 Blocked aria-hidden on an element because its descendant retained
高级前端工程师
10-30 1万+
vue2，element ui，单选框组件，el-radio，报错，vue2 element ui 使用radio单选框出现报错Blocked aria-hidden on an element because its descendant retained focus. The focus must not be hidden from assistivetechnology users，元素上的Blocked aria-hidden，单选框报错，指令不行，deep覆盖了css样式也不行，如何解决这个问题
Chrome提示（已屏蔽：mixed-content）
XuanRan的博客
05-06 4540
（已屏蔽：mixed-content）解决方案
前端请求后端接口报错(blockedmixed-content)，以及解决办法
m0_74824044的博客
12-11 3016
混合内容是指在同一页面中同时包含安全（HTTPS）和非安全（HTTP）资源的情况。当浏览器试图加载非安全资源时，它会发出“混合内容”警告，阻止加载不安全的请求。为什么会出现“blocked:mixed-content”错误？
接口报错mixed content blocked
weixin_34258078的博客
06-12 2801
原因：https不能调用http接口。 转载于:https://www.cnblogs.com/wangxuehao/p/6993042.html
Vue element-admin 访问后端服务(blocked:mixed-content)
11-08 513
最近发布到线上环境，前后端不在一台机器，访问后端接口的时候，提示blocked:mixed-content。后端服务springboot的时候，本地和测试环境都很正常，通过nginx配置域名，讲https请求转发请求后端服务。在开发项目前端框架element-admin，
vue3项目 前端blocked:mixed-content问题解决方案
qq_48665028的博客
07-07 1438
blocked:mixed-content其实浏览器不允许在https页面里嵌入http的请求，现在高版本的浏览器为了用户体验，都不会弹窗报错，只会在控制台上打印一条错误信息。一般出现这个问题就是在https协议里嵌入了http请求，解决方法如下。直接设置谷歌浏览器允许不安全内容。
前端请求接口状态报blocked:mixed-content的原因
博哥的二进制世界
08-05 2万+
前端请求接口状态报blocked:mixed-content的原因 如下图，前端在请求接口的时候报错Mixed Content，这是因为浏览器不允许在https协议的页面里请求http的接口，现在高版本的浏览器为了用户体验，都不会弹窗报错，只会在控制台上打印一条错误信息。 最简单的解决办法当然就是不要使用http请求，把网站上的http请求都迁移到https。 ...
chrome禁止混合内容（Mixed Content） 解决
热门推荐
qq_36657291的博客
12-30 2万+
问题描述：网站协议是https（安全），下载excel地址的协议是http（不安全），所以点击下载会报以下错误 从Chrome84开始阻止混合内容， 页面的地址是通过 HTTPS 加载的，但是里面有不安全的内容（通过 HTTP 加载，被认为是不安全的），所以excel的链接自动升级为了 HTTPS 链接。 加载不出来的原因就找到了：Chrome 认为页面使用了 HTTPS 加载，下载地址如果是 HTTP 加载就不安全，会自动给升级为 HTTPS 加载。 解决办法： 一、 点击地址栏小锁图标
http----在https网站请求http，提示block:mixed-content问题
Seeyoucm
04-02 7137
在https网站请求http，提示block:mixed-content问题
(blocked:mixed-content)啥报错
最新发布
08-06
`Blocked:Mixed-Content` 错误是浏览器在加载页面时为了保障安全而触发的一种保护机制。其核心原因是当页面通过 HTTPS 协议加载时，其中某些资源（如脚本、图片、样式文件或 API 请求）尝试通过 HTTP 协议加载，这会破坏页面的安全性，导致潜在的安全漏洞[^1]。 HTTPS 是加密协议，能够保障数据在传输过程中的完整性和机密性，而 HTTP 是明文传输协议，容易受到中间人攻击（MITM）。浏览器为了确保整个页面的通信安全，会对混合内容进行拦截，阻止不安全的 HTTP 请求完成[^3]。 ### 常见原因 - 页面本身是通过 HTTPS 加载，但其中的某个资源（例如图片、CSS、JavaScript 或 API 请求）使用了 HTTP 协议。 - 开发过程中可能未注意资源的协议类型，例如后端接口地址硬编码为 `http://example.com/api`，而不是使用相对路径或动态配置 HTTPS 地址。 - 第三方资源未提供 HTTPS 版本[^2]。 ### 解决方法 1. **将所有资源请求改为 HTTPS** 确保所有资源（包括 API 请求、图片、脚本和样式文件）都通过 HTTPS 协议加载。例如，将 `http://api.example.com/data` 改为 `https://api.example.com/data`[^2]。 2. **使用相对协议（Protocol-relative URLs）** 可以使用 `//example.com/resource.js` 这样的地址格式，这样浏览器会根据当前页面使用的协议（HTTP 或 HTTPS）自动选择相同的协议加载资源。 3. **检查第三方资源** 如果页面中引入了第三方资源（如广告、统计代码等），确保这些资源也支持 HTTPS。如果第三方不提供 HTTPS 版本，则需要寻找替代方案。 4. **使用内容安全策略（CSP）** 在 HTTP 响应头中添加 `Content-Security-Policy`，明确指定哪些资源可以安全加载，防止加载不安全的内容。 5. **开发环境配置 HTTPS** 在本地开发环境中也启用 HTTPS，例如使用自签名证书或工具如 `mkcert` 创建本地可信证书，以避免开发阶段引入 HTTP 资源。 6. **检查后端配置** 如果前端请求的后端接口地址配置为 HTTP，需要修改为 HTTPS。同时，确保后端服务正确配置了 SSL 证书，并且可以通过 HTTPS 访问。 ### 示例：修改请求地址为 HTTPS ```javascript // 错误示例：使用 HTTP 请求 fetch('http://api.example.com/data'); // 正确示例：使用 HTTPS 请求 fetch('https://api.example.com/data'); ``` ### 示例：使用相对协议 ```html <!-- 使用相对协议加载脚本 --> <script src="//example.com/script.js"></script> ``` ### 示例：配置 Content-Security-Policy 头 ```http Content-Security-Policy: default-src https:; ``` 通过上述方法可以有效解决 `Blocked:Mixed-Content` 错误，确保页面资源加载的安全性与完整性。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值