【uniapp，移动端，富文本，视频】移动端解析富文本，视频不显示 报 ‘’通过HTTPS加载，但请求了一个不安全的帧 此请求已被阻止；必须通过HTTPS提供内容。 混合内容“”

最新推荐文章于 2023-10-24 16:54:40 发布
原创 最新推荐文章于 2023-10-24 16:54:40 发布 · 1k 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#uni-app #javascript #前端

在移动端解析含视频的富文本时遇到‘混合内容’错误，可以尝试在请求头添加`<metahttp-equiv=Content-Security-Policycontent=upgrade-insecure-requests/>`。如果无效，可按照uni-app的文档创建自定义HTML模板，并在manifest.json中配置，确保内容通过HTTPS安全提供。

在这里插入图片描述
移动端，解析含有视频的富文本时，报 “混合内容： 通过HTTPS加载，但请求了一个不安全的帧，此请求已被阻止；必须通过HTTPS提供内容。”

Mixed Content ： was loaded over HTTPS, but requested an insecure frame
This request has been blocked; the content must be served over HTTPS.

解决方法：

请求头加上 	<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" /> 即可

如果还不行，再试以下方法：

最低0.47元/天 解锁文章
uniapp - [全端兼容] 实现精美Editor富文本编辑器功能，uniApp全平台兼容的富文本插件组件用户可上传图片及对接服务器存储文件等，手机移动端H5网页富文本/小程序富文本/App富文本！
🏆 前端领域优质创作者
11-01 1万+
uni-app，h5移动端网页，微信小程序，支付宝小程序，Android安卓，苹果ios，app，nvue，uniapp富文本编辑器，uniapp中如何实现各平台都兼容的富文本编辑器，Editor富文本插件，uniApp微信小程序富文本，UNI-APP安卓苹果ios系统App端富文本组件，editor富文本编辑器如何实现上传图片，图片上传后不显示怎么办，如何配置图像上传功能，富文本图片上传怎么传到服务器中，获取图片路径，editor插入图片，富文本编辑器上传图片，报错怎么办，跨域CORS处理，配置不行无效
react打包后线上访问项目此请求已被阻止;内容必须通过HTTPS提供。
周家大小姐
12-08 2718
postActions.js:7 Mixed Content: The page at 'https://zhouyunfang.github.io/react-redux/index.html' was loaded over HTTPS, but requested an insecure resource 'http://jsonplaceholder.typicode.com/posts'...
uniap 接口此请求已被阻止；内容必须通过HTTPS提供【已解决】
Leijiang0504的博客
03-02 2155
首先找到我们uniapp 的manifest.json配置文件。uniapp 我遇到的是我调用node写的接口时，是可以被调用的，但是用我本地的ip时出现了这个。必须重新启动服务才生效这个是重点！修改https为false就可以，
uniApp小程序解析富文本，视频无法显示问题
sunshinebotanka的博客
04-18 2694
uniApp小程序解析富文本，视频无法显示问题
uni-app 自定义组件展示html富文本内容，可实现富文本html内容中 图片展示、视频播放、音频播放。
06-10
uni-app 富文本内容利用html2json转换成对应类似控件 rich-text 对应的数组资源格式后进行展示的自定义组件、可以进行富文本html内容中 图片展示、视频播放、音频播放。
uin-app 对接后端接口报错This request has been blocked； the content must be served over HTTPS.
fengxiangxi的博客
10-24 926
解决uin-app项目在对接后台接口时产生的必须通过HTTPS请求问题
This request has been blocked； the content must be served over HTTPS.
米诺有糖吃
06-01 1万+
This request has been blocked;
悦读uniApp前端源码下载即用支持PHP后端
通过对此源码的深入剖析，开发者可以系统性地掌握Vue语法在uni-app中的具体应用、生命周期钩子的合理使用、全局状态管理方案（如vuex或uni.setStorageSync）、自定义导航栏设计、富文本解析、图片懒加载优化等高级...
uniapp app 渲染 emoji
最新发布
03-29
作为一个专注于移动端适配的强大引擎，它可以轻松应对包括但不限于 ECharts 图形绘制、LaTeX 数学公式排版在内的多种复杂任务的同时也提供了良好的 Emoji 展现效果。 要启用这个特性只需要确保版本不低于 3.0 即可...
UniApp实战：构建新闻应用与跨平台性能优化指南
本文通过构建一个新闻阅读应用的实战项目，全面展示了UniApp的开发流程与技术要点，涵盖了从项目初始化、功能实现、界面设计到性能优化的完整过程，是一份非常实用的开发指南。 在项目背景方面，新闻阅读类应用是...
此请求已被阻止；内容必须通过HTTPS提供 This request has been blocked； the content must be served over HTTPS.
qq_44217121的博客
02-01 4373
jquery.min.js:4 Mixed Content: The page at 'https://localhost:44350/Home/Index' was loaded over HTTPS, but requested an insecure script 'http://ip.ws.126.net/ipquery?_=1643726899282'. This request has been blocked; the content must be served over HTTPS.
此请求已被阻止；内容必须通过HTTPS提供
JiaWJW的博客
01-27 4071
Mixed Content: The page at 'xxx' was loaded over HTTPS, but requested an insecure resource 'xxx'.
uniapp小程序使用富文本不能展示视频
meng2lin的博客
04-28 3375
uniapp小程序使用富文本 在开发小程序中，原来用的rich-text标签展示的富文本，但是里面的视频的话不会展示，这样的情况我们如何解决呢？ 小程序中使用mp-html 网址 uniapp引入 首先我们在插件市场中导入到项目中 mphtml在template中的使用 <template> <view> <mp-html :content="content" /> </view> </template> <script&gt
Mixed Content: The page at ‘＜URL＞‘ was loaded over HTTPS, but requested an insecure frame ‘＜URL＞‘...
java小白翻身
04-16 9044
在添加了SSL证书的HTTPS中引入用HTTP的链接，就报错，请求协议的不同导致的 所有有关https带有http的文件或者链接例如：images / js等文件都会报请求 “网页的“ < url > ”是通过 HTTPS 加载的，但是请求一个不安全的帧“ < url > ”。此请求已被阻止; 内容必须通过 HTTPS 提供。” 解决方法： 第一种：查看http的文件，放到https路径中，引入方式添加https 第二种 页面的head中加入： <.
工作踩坑系列——https访问遇到“已阻止载入混合活动内容”
weixin_34408717的博客
07-22 2869
前言 最近在主导公司网站进行全站Https改造工作，本文记录在改造过程中遇到的一个由于后端302跳转导致前端浏览器阻止访问的问题，感觉这样的问题有一定通用性，所以编辑成文，希望能给遇到类似问题的人们有所帮助。 问题复现 经过一段时间的调研工作，终于将公司的环境改造成支持https访问模式，信心满满的打开公司测试环境主页，https://t...
this request has been blocked;the content must be served over https
热门推荐
止于至善
07-19 2万+
1、错误： this request has been blocked;the content must be served over https 2、遇到错误的情况： 在github page搭建自己写的页面时。搭建成功后，访问自己的页面返回的错误。我的页面阻止的是jQuery的官网引入的jQuery。 &lt;script src="http://code.jquery.com/jqu...
页面报错This request has been blocked； the content must be served over HTTPS
weixin_57209852的博客
09-20 1830
mean:自动将http的不安全请求升级为https。网站所用的是https请求http，被阻止。1.页面中都用https 或者http。2.在标签中添加下列代码。https http混合导致，
页面跳转报错: This request has been blocked; the content must be served over HTTPS
她们都叫我靓仔
01-16 1万+
报错如下: 原因: http、https混合导致的 HTTPS页面里动态的引入HTTP资源，比如引入一个js文件，会被直接block掉的.在HTTPS页面里通过AJAX的方式请求HTTP资源，也会被直接block掉的。 解决方法: 在报错页面的<head>中加入： <meta http-equiv="Content-Security-Policy"...
uniapp移动端富文本编辑器
09-01
在uni-app移动端，可以使用富文本编辑器组件来实现富文本编辑的功能。uni-app提供了一个基于wangeditor封装的富文本编辑器组件，兼容V2/V3，适用于uni-app项目的web端管理系统。这个编辑器组件可以对图片、文字格式进行编辑和混排，并且支持插入图片和视频、调整字体大小、斜体、下划线和加粗等样式，还可以进行左中右三种排版。编辑器导出的内容可以是带标签的HTML格式或纯文本格式，同时编辑器内部采用delta格式进行内容存储。需要注意的是，当通过接口设置内容时，插入的HTML可能由于非法标签导致解析错误，建议开发者在应用内使用时使用delta进行插入操作。这个编辑器组件在技术上运行在视图层webview中，利用浏览器的contenteditable功能来实现富文本编辑的功能。所以，在非H5平台上无法直接使用contenteditable，但是uni-app的App-vue和H5平台提供了兼容性的实现。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *3* [如何基于uni-app的editor开发一个简单的富文本编辑器](https://blog.youkuaiyun.com/weixin_43945140/article/details/125693300)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] - *2* [uniapp：mosowe-editor富文本编辑器](https://blog.youkuaiyun.com/skyblacktoday/article/details/130175179)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_1"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值