解决富文本中抖音视频无法播放的问题——403

问题

  • 富文本中的抖音视频无法播放,资源状态码是403禁止访问
  • 打开控制台,可以看到在项目中打开,数据请求的请求头多了一个Referer: http://localhost:3000/
  • 而复制链接在新窗口直接打开,请求头中并不会携带Referer

解决方案

  • 在index.html中添加 <meta name=referrer content=no-referrer>

referrer 请求的来源URL,设置了安全策略就会返回403禁止访问

  • referer 的 metadata 属性可以设置 content 属性值为以下

    • default :若当前页面使用的是 https 协议,而正要加载资源使用的是普通的 http 协议,则将 http header 中的 referer 置空;

    • never :删除 http header 中的 referer,所有从当前页面发起的请求将不会携带 referer;

    • always :不改变 http header 中的 referer 的值;

    • origin :只发送 origin 部分;

    • no-referrer:没有referer;

相关推荐
安分小尧4 小时前
React 文件上传新玩法:Aliyun OSS 加持的智能上传组件
前端·react.js·前端框架
编程社区管理员4 小时前
React安装使用教程
前端·react.js·前端框架
拉不动的猪5 小时前
vue自定义指令的几个注意点
前端·javascript·vue.js
yanyu-yaya5 小时前
react redux的学习,单个reducer
前端·javascript·react.js
skywalk81635 小时前
OpenRouter开源的AI大模型路由工具,统一API调用
服务器·前端·人工智能·openrouter
Liudef065 小时前
deepseek v3-0324 Markdown 编辑器 HTML
前端·编辑器·html·deepseek
拉不动的猪5 小时前
uniapp与React Native/vue 的简单对比
前端·vue.js·面试
z_mazin6 小时前
Chrome开发者工具实战:调试三剑客
前端·javascript·chrome·网络爬虫
sen_shan7 小时前
Vue3+Vite+TypeScript+Element Plus开发-04.静态菜单设计
前端·javascript·typescript·vue3·element·element plus·vue 动态菜单
旧识君7 小时前
移动端1px终极解决方案:Sass混合宏工程化实践
开发语言·前端·javascript·前端框架·less·sass·scss