嵌入 YouTube 视频会导致 CORS 错误

问题描述 投票:0回答:2

我正在尝试在我的离子应用程序中嵌入视频,但加载页面时会显示错误:

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" />

我应该如何解决这个问题?我错过了什么吗?

angularjs ionic-framework youtube
2个回答
0
投票

尝试使用 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/

希望这有帮助。


0
投票

我补充道:

<access origin="*" />

在config.xml中

© www.soinside.com 2019 - 2024. All rights reserved.