angularjs - 嵌入youtube视频会导致CORS错误

标签 angularjs ionic-framework youtube

我正在尝试将视频嵌入我的 ionic 应用程序,但是在加载页面时出现错误:

GET https://redirector.googlevideo.com/videoplayback?pcm2cms=yes&key=yt6&ei=5HE…QBGK&c=WEB&cver=1.20170425&cmo=pf=1&range=0-622&rn=15&playerretry=3&rbuf=0 404 (Not Found)

XMLHttpRequest cannot load https://redirector.googlevideo.com/videoplayback?pcm2cms=yes&key=yt6&ei=5HE…QBGK&c=WEB&cver=1.20170425&cmo=pf=1&range=0-622&rn=15&playerretry=3&rbuf=0. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'https://www.youtube.com' is therefore not allowed access. The response had HTTP status code 404.

这是我的html代码:
<iframe width="420" height="315" src="{{video}}" ></iframe>

这是controller.js代码:
$scope.video =  "https://www.youtube.com/embed/RP-mvJE9EQM";

我在我的app.js文件中添加了它:
$sceDelegateProvider.resourceUrlWhitelist(['self', new RegExp('^(http[s]?):\/\/(w{3}.)?youtube\.com/.+$')]);

这在我的config.xml文件中:
<allow-navigation href="*.youtube.com" />
<preference name="AllowInlineMediaPlayback" value="true" />

我应该如何解决这个问题?我想念什么吗?

最佳答案

尝试使用http代替https。
另外,尝试将这一行放在index.html中

<head>
<meta http-equiv="Content-Security-Policy" content="default-src *; style-src * 'unsafe-inline'; script-src * 'unsafe-inline' 'unsafe-eval'; img-src * data: 'unsafe-inline'; connect-src * 'unsafe-inline'; frame-src *;">
</head>

使用它时要小心,因为它可以容纳所有东西。
有关内容安全策略的更多信息:

https://developers.google.com/web/fundamentals/security/csp/

希望这可以帮助。

关于angularjs - 嵌入youtube视频会导致CORS错误,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43631327/

相关文章:

javascript - angularjs $window.location.href 返回没有 css 的页面

angular - ionic 4 防止/禁用设备硬件后退按钮

android - CLI 中的 Ionic build android 什么都不做

php - YouTube按ViewCount搜索视频

javascript - Angularjs:这是使用指令的正确位置吗?

javascript - 输入中的 ngBlur 与该输入框中搜索的列表项之间的问​​题

javascript - angular chart.js 的数据属性中的表达式

javascript - 如何在有图像时更改拍摄照片文本以重新拍摄照片文本

java - YouTube/GData API回应 “Missing start boundary”

Youtube channel 过去 30 天和观看次数