Open1

Musickit JS(V3) + Nuxt.jsでのCORSエラー時の状況

sukezanesukezane

エラー内容:
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メソッドをリクエストすることで解消