Search code examples
axioscorsnuxt.jsmusicbrainz

Fetching album art from the Cover Art Archive (archive.org) API leads to CORS errors due to redirects


I'm developing a frontend for the MusicBrainz API that can search for artists as well as their releases (release groups, specifically). When I attempt to find a certain cover art from the release group's respective MusicBrainz ID (MBID) via their Cover Art Archive with the Axios library, I receive two CORS errors:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ia802802.us.archive.org/9/items/mbid-<any MBID>/index.json. (Reason: CORS request external redirect not allowed).
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://ia802802.us.archive.org/9/items/mbid-<any MBID>/index.json. (Reason: CORS request did not succeed).

What I've done so far

Following some research, I realised that the Cover Art Archive does not host their own images; rather, accessing their API leads to a redirect to the Internet Archive API. As such, I am instead going straight to the IA API in order to find the cover art I need, as I can find it with a MBID there, too. This itself would lead to a CORS error, but I am using a proxy (with Nuxt.js), meaning I can connect to the Internet Archive - at least initially - with no issue.

proxy: {
  '/archive': {
    target: 'https://archive.org/',
    pathRewrite: {
      '^/archive': ''
    }
  }
},

The main issue is that the IA then redirects again to a destination that is dynamic and often changes. Due to this, I am unable to predict where the redirect will go and I cannot avoid the aforementioned CORS errors, even via a proxy - Axios does not use it here, understandably.

I have researched this fairly extensively and I cannot find how to prevent these errors from appearing when I cannot stop the redirects from happening.

const getAlbumArtLocation = (release, index) => {
  this.$axios
    .get(
      '/archive/download/mbid-' + release.id + '/index.json'
    )
    .then((res) => {
      const imageURL = res.data.images[0].image
      getAlbumArt(imageURL, index)
    })
    .catch((err) => {
      // Try get another album artwork.
      console.error(err)
      index += 1
      getAlbumArtCandidate(index)
    })
}

The code for the file in question can be found here.

My Nuxt configuration can be found here.

It's worth noting that these errors only appear in Firefox and not other Chromium-based browsers.


Solution

  • EDIT

    As you are using @nuxtjs/proxy middleware, which is using http-proxy-middleware, you can configure the proxy to follow redirects (which is off by default) - so redirect response will not be returned to your client but proxy will follow the redirect on the server and return only final response...

    Change your nuxt.config.js from:

    '/archive': {
          target: 'https://archive.org/',
          pathRewrite: {
            '^/archive': ''
          }
        }
    

    to:

    '/archive': {
          target: 'https://archive.org/',
          pathRewrite: {
            '^/archive': ''
          },
          followRedirects: true
        }