这是我得到的错误信息:
Failed to execute 'postMessage' on 'DOMWindow': The target origin provided
('https://www.youtube.com') does not match the recipient window's origin
('http://localhost:9000').
我见过其他类似的问题,其中目标源是http://www.youtube.com,收件人源是https://www.youtube.com,但没有一个像我的问题一样,目标是https://www.youtube.com,源是http://localhost:9000。
我不明白这个问题。有什么问题吗?
我该怎么解决呢?
我想我们可以定制YT的sendMessage。球员
playerOptions.playerVars.origin = window.location.origin or your domain.
this.youtubePlayer = new YT.Player(element,playerOptions);
this.youtubePlayer.sendMessage = function (a) {
a.id = this.id, a.channel = "widget", a = JSON.stringify(a);
var url = new URL(this.h.src), origin = url.searchParams.get("origin");
if (origin && this.h.contentWindow) {
this.h.contentWindow.postMessage(a, origin)
}
}
我在我的项目中使用了这个函数来求解。
我想我们可以定制YT的sendMessage。球员
playerOptions.playerVars.origin = window.location.origin or your domain.
this.youtubePlayer = new YT.Player(element,playerOptions);
this.youtubePlayer.sendMessage = function (a) {
a.id = this.id, a.channel = "widget", a = JSON.stringify(a);
var url = new URL(this.h.src), origin = url.searchParams.get("origin");
if (origin && this.h.contentWindow) {
this.h.contentWindow.postMessage(a, origin)
}
}
我在我的项目中使用了这个函数来求解。
它看起来只是一个Chrome安全系统,阻止重复请求,使用CORB。
https://www.chromestatus.com/feature/5629709824032768
在我的案例中,YouTube在第一次加载相同的网页后阻止访问,该网页有许多视频API数据请求,高负载。
对于负载较低的页面,则不会出现此问题。
在Safari和其他非基于Chronuim的浏览器中,不会出现此问题。
如果我在新的浏览器中加载网页,问题不会发生,当我重新加载同一页面时,问题就出现了。