Open1
Musickit JS(V3) + Nuxt.jsでのCORSエラー時の状況
エラー内容:
MusicKit JS(V3)のauthorizeメソッド実行時、CORSエラーが発生する
発生時の状況:
index.vue
methods: {
async importMusickit() {
if (process.client) {
const script = document.createElement('script')
const src = await this.$axios.$get(
'https://js-cdn.music.apple.com/musickit/v3/musickit.js'
)
script.async = true
script.setAttribute('data-web-components', true)
script.appendChild(document.createTextNode(src))
document.head.appendChild(script)
try {
await window.MusicKit.configure({
developerToken: this.developerTokenAppleMusic,
app: {
name: 'App',
build: '2021.1.1'
}
})
} catch (err) {
throw new Error(err)
}
this.appleMusic.musicKit = window.MusicKit.getInstance()
}
},
}
原因:
this.appleMusic.musicKit = window.MusicKit.getInstance()
でMusickitのgetInstanceメソッドをvueのdataに代入してauthorizeメソッドをリクエストしたことでエラーが発生
対処:
vueのdataに代入せず、window.MusicKit.getInstance().authorize()
で直接authorizeメソッドをリクエストすることで解消