vue使用video播放视频跨域问题“has been blocked by CORS policy: No ‘Access-Control-Allow-Origin

已于 2024-07-31 09:59:24 修改
阅读量1.6k 收藏 3
点赞数 15
分类专栏： Vue.js 文章标签： vue.js 音视频 前端
于 2024-07-31 09:57:55 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_46156566/article/details/140814822
版权

直接看代码

重点

注意：是crossOrign=“anonymous”，不是crossOrigin=“anonymous”

我真的服了，网上答案十个九个都是错的，那些人发出来的东西自己都不验证一下吗，多了一个 i 让我好找啊，最后还是解决了，如果你用crossOrign无法解决就把 i 加上吧，我也不知道什么原因，反正的我不加 i 就可以播放了，记录一下这个大坑

<video
      ref="veoRef"
      class="u-video"
最低0.47元/天 解锁文章
【Vue-Spring跨域Bug已解决】has been blocked by CORS policy: The value of the······
一键难忘的博客
04-12 2458
这个报错提示是因为在跨域请求中，请求头中设置了 withCredentials 参数为 true，表示跨域请求需要使用凭证（如 cookies、HTTP 认证等）。而在响应头中，Access-Control-Allow-Origin 的值不能是通配符 *，必须是具体的域名。另外，如果你在发送跨域请求时需要携带 cookies 或其他凭证，还需要在请求头中设置 withCredentials 参数为 true。如果需要全局配置跨域支持，应该使用上一条回答中提到的方式，在配置类中设置。
出现 has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the 解决方法
码农研究僧的博客
06-03 1万+
Access to XMLHttpRequest at 'http://127.0.0.1:5000/api/data' from origin 'http://10.197.0.79:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.
解决跨域has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘，利用Proxy反向代理
我还起舞了的博客
11-21 4329
我们要配置反向代理的原因是：因为跨域问题我们直接拿不到跟我们不同域名不同端口号下的数据，这是浏览器的跨域限制，我们不能在浏览器上显示后端的数据，但是服务器端没有跨域限制，所以可以让我们自己的服务器（项目运行，会启动一台服务器），去请求后端服务器，拿到数据，然后再传给我们前端。反向代理服务器的应用：往这个接口发请求，被拦截到了，凡是往这个接口发请求的，反向代理服务器，会在前面加上target域名 ，往真实的地址去请求。在vue.config.js文件中进行以下配置proxy，具体配置信息可以看下文。
跨域资源共享（CORS）策略引起的浏览器拦截
最新发布
weixin_74417835的博客
03-26 328
的后端服务器发送请求时，浏览器出于安全考虑会进行 CORS 检查。如果后端服务器没有正确配置 CORS 头信息，就会阻止请求。这个错误是由跨域资源共享（CORS）策略引起的。当你的前端应用（运行在。在 Spring Security 配置中允许 CORS。1、在后端添加 CORS 配置（推荐）
.net core +vue 的前后端分离项目，把这个错误：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ head
kuyz1的专栏
06-13 1091
当浏览器在请求跨域资源时，会先发送一个预检请求（OPTIONS请求）给服务器，服务器需要在响应头中添加Access-Control-Allow-Origin字段来指定允许的源。这样配置完成后，你的.NET Core应用就会允许来自Vue应用的跨域请求了，并且浏览器将不再报错。在Vue应用中配置代理： 如果你的Vue应用是通过Vue CLI开发的，可以在项目的根目录下找到。在后端（.NET Core）中配置CORS： 在你的.NET Core项目中，找到。方法来指定允许的源，你需要将。
解决前后端跨域报错：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘
wsaicyj的博客
11-11 2万+
来自一个IP端口的页面（前端项目），要访问另一个IP端口的资源（springboot请求接口），会产生跨域访问。
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested
weixin_43803924的博客
03-18 1万+
用vue-cli搭建的项目，运行了一下就报了这个错。字面意思就是这个请求被CORS锁住了，缺少一个请求头“Access-Control-Allow-Origin”。这个请求头是CORS的重要点，这就以为这遇上了跨域的问题啦。 之前造成问题的axios代码： const url="http://www.a-bm.cn/chanpin-0_p0.html" this.$axios({...
Vue跨域问题 has been blocked by CORS policy:....No ‘Access-Control-Allow-Origin‘ header
qq_40794785的博客
10-10 12万+
Vue跨域踩的坑 has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 问题再现 axios封装： //为了使用方便自定义了一个request请求方法 export function request(config
has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on the requested
m0_73665762的博客
12-15 1342
我看报错应该是跨域问题，可是我明明配置了跨域。附上springboot过滤器配置。没想到还要在过滤器那配置响应头。并且返回数据加载不了。
vue用axios进行token请求出现has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header的解决方案
FHlang的博客
04-16 4362
遇到的问题 Access to XMLHttpRequest at ‘http://localhost:8081/order/no’ from origin ‘http://localhost:8080’ has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. 翻译：通过CORS策略已阻止从源"http:// localhost:8080"
[qiankun] Failed to fetch has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header
qubes的专栏
10-11 5782
enviroment 微前端框架 qiankun error 控制台报错 single-spa.min.js?25a2:2 Uncaught TypeError: application ‘vue2’ died in status LOADING_SOURCE_CODE: Failed to fetch has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header reason 这个报错的意思是主应用需要拉取的子应用vue2
Vue报错has been blocked by CORS policy Response to preflight request doesn‘t pass access controlcheck
m0_67394006的博客
03-06 7805
【已解决–我的是由于vue-cli版本问题，前文太长可以直接跳转到解决方案】 文章目录 服务端跨域解决 Nginx配置跨域（下文的解决方案是开发环境下，部署上线需要在nginx中配置反向代理） 前端的跨域配置 解决方案 网上的一些解决方案 全部的报错信息： Access to XMLHttpRequest at 'http://127.0.0.1:7772/person/sysOrgInfo/query-next-org-emp?id=xxx' from origin 'http://l
Vue报错has been blocked by CORS policy: Response to preflight request doesn‘t pass access controlcheck
热门推荐
风不知从何处起的小屋
05-15 19万+
全部的报错信息： Access to XMLHttpRequest at 'http://127.0.0.1:7772/person/sysOrgInfo/query-next-org-emp?id=xxx' from origin 'http://localhost:8086' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Contro
Vue DEV报错has been blocked by CORS policy: Response to preflight request doesn‘t pass access 跨域问题
Android 领域开发程序员，希望通过写博客的方式不断的总结提升自己，大家共同进步哦！
05-29 568
2.并且把axios里的baseURL改为空，就解决了。1.vite.config.js文件里配置。问题：本地DEV环境运行报错跨域问题。
vue跨域请求被拦截has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on...
style_L_的博客
12-10 1948
跨域请求被拦截has been blocked by CORS policy: No ‘Access-Control-Allow-Origin‘ header is present on...// 放行所有跨域请求。vue 展示pdf文件 使用。解决方式：简单粗暴 放行所有。
Vue中Axios发起接口请求出现跨域问题:has been blocked by CORS policy
第一段代码的博客
04-15 7631
blocked by CORS policy:Access-Control-Allow-Origin通常指的就是浏览器判断请求跨域问题导致. 解决方案: 1.前端设置代理的方式: 在vue.config.js的配置文件中,配置代理伪装请求的方式,解决跨域: 详细配置和配置属性解释,见代码注释 devServer: { port: 9999, // open: true, // 设置代理 proxy: { //配置跨域 '/api': { tar
解决has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’报错跨域问题
m0_46127185的博客
01-07 10万+
关于前后端分离踩过的坑 故事起因:前天晚上，在计划中学完了一个前端获取后端请求的框架叫axios。然后准备用axios、vue、以及fastapi（一个Python的web框架）写一个前后端分离的小demo。结果变成了事故，竟然报错了。 主要错误是：has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’。大概的意思是，已被CORS策略阻止：无“访问控制允许来源”。当时我也百度了一下CORS后来因为自己懒了，所以就去问一个朋友，然后
Vue中axios请求 提示has been blocked by CORS policy:....No ‘Access-Control-Allow-Origin‘ header 跨域问题
wisxiaobai的博客
04-12 4120
1.在vue.config.js下添加 devServer: { proxy: { '/api': { target: 'xxxxxx', // 请求接口地址 changeOrigin: true, pathRewrite: { '^/api': '' } }, } } 2.修改 axios.defaults.baseURL = '/api' ...
vue blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource.
12-07
如果一个资源的访问没有得到允许，那么就会出现“blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.”的错误提示。解决这个问题的方法有以下几种： 1.在...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

前端攻城狮路飞

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值