Has anyone encountered this problem?
Use Vue-cli to develop multi-page case
－－－－－－－－－－－－－－－
Test browser version: google chrome 103.0.5060.134 version
dependencies : { "vue": "^2.6.11", "vue-meta": "^2.4.0", "vue-router": "^3.2.0", }
－－－－－－－－－－－－－－－
what happend?
When npm run serve , and enter website, the error message is like below block No problem at all, and sometimes the error always occurs when I click cmd+shift+R && F5
The service worker navigation preload request was cancelled before 'preloadResponse' settled. If you intend to use 'preloadResponse', use waitUntil() or respondWith() to wait for the promise to settle.
In some situations, like click other pages also error messages like below block
www-widgetapi.js:987 Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ('http://localhost:3000'). 
－－－－－－－－－－－－－－－
[code] Mounted
...
data () {
return {
player: null
}
},
mounted () {
const tag = document.createElement('script')
tag.src = 'https://www.youtube.com/iframe_api'
const getHead = document.getElementsByTagName('Head')[0]
getHead.append(tag)
// when first init youtubeapi
window.onYouTubeIframeAPIReady = () => {
this.initYoutube(this.$refs.player)
}
// when again into the page
this.initYoutube(this.$refs.player)
},
beforeDestroy () {
// when leave the page will destory this player
if (this.player !== null && this.player.destroy) {
this.player.destroy()
delete this.player
}
},
Methods
methods: {
initYoutube () {
if (!window.YT) return
this.player = new window.YT.Player('player', {
height: '1080',
width: '1920',
videoId: 'HDx8Z-XB7A4',
playerVars: {
autoplay: 1,
controls: 0,
disablekb: 1,
fs: 0,
iv_load_policy: 3,
loop: 1,
modestbranding: 0,
rel: 0,
playsinline: 1,
playlist: 'HDx8Z-XB7A4',
origin: 'http://localhost:3000', // It's look didn't work
host: 'https://www.youtube.com'// It's look didn't work
},
events: {
onReady: this.onPlayerReady,
onStateChange: this.onPlayerStateChange
}
})
},
onPlayerReady (evt) {
// loop the video
evt.target.mute()
evt.target.playVideo()
},
onPlayerStateChange (evt) {
// loop the video
if (evt.data === 0) {
evt.target.playVideo()
}
}
...
}