vue 播放器开发获取音频数据流,CORS跨域限制的问题

记录一下在开发自己项目遇到的问题

CORS跨域限制的问题

MediaElementAudioSource outputs zeroes due to CORS access restrictions //在浏览器上报的错误

找了半天终于在某论坛上看到了救星:

在audio标签有src链接的同时设置上属性 rossOrigin=“anonymous”;

在html不要直接写地址,让浏览器一开始加载就就直接跨域了,所以如果写了得设置audio标签这个属性(crossOrigin=‘anonymous’;)
或者 是html的src先不设置,在javascript里边设置再建立

var audio =document.getElementById("audio");
audio.crossOrigin = 'anonymous';
audio.src='https://fourthof5assets.s3-eu-west-1.amazonaws.com/heng-feeling-good.mp3';
var source = context1.createMediaElementSource(audio);

下面就是那位大佬的,感谢

在这里插入图片描述

  • 1
    点赞
  • 4
    收藏
    觉得还不错? 一键收藏
  • 8
    评论
Vue是一种流行的JavaScript框架,用于构建现代Web应用程序。Vue框架允许我们使用Vue组件构建UI界面,并使用Vue Router和Vuex来管理应用程序状态和路由。另一方面,axios是一个流行的JavaScript库,用于进行HTTP请求。它提供了一种简单的方式来与后端API进行通信。当我们在Vue中使用axios进行http请求时,可能会遇到cors问题CORS(Cross-Origin Resource Sharing)是一种安全机制,用于保护Web服务器上的资源免遭恶意攻击。例如,当我们从一个域名(或端口)向另一个域名发起http请求时,会遇到CORS限制。这是由浏览器实施的策略,以防止恶意网站在用户不知情的情况下访问其他网站的数据。 为了解决Vue axios的CORS问题,需要在后端API中启用CORS策略。这可以通过在后端服务器的响应中包含以下HTTP响应头来实现: Access-Control-Allow-Origin: * 此外,还可以指定特定的域名作为允许访问的来源。例如: Access-Control-Allow-Origin: https://example.com 在Vue中,我们可以使用axios的`withCredentials`选项来在跨域请求中携带cookie。例如: axios.get('https://api.example.com/data', { withCredentials: true }) 还可以在Vue的配置中全局设置axios的默认选项。例如: import axios from 'axios' axios.defaults.withCredentials = true Vue.prototype.$axios = axios 在总结上述内容时,解决Vue axios CORS问题的方法是启用后端API的CORS策略。我们可以在响应头中包含Access-Control-Allow-Origin。另外,我们可以在axios选项中设置`withCredentials`选项以让浏览器在跨域请求中携带cookie。通过全局设置axios默认选项,我们可以在Vue应用程序中轻松使用axios。
评论 8
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值