0

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.

Lachlan
  • 1,245
  • 5
  • 18
  • 34
  • Can you please add complete code with Codepen or Codesanbox to check errors! – Hardik Shah Jun 10 '20 at 12:10
  • I've updated my post accordingly with the relevant file. https://gist.github.com/lachlantula/95acabbea3feefc2d153b5e27a58334f – Lachlan Jun 10 '20 at 12:14
  • Thanks for adding gist. Need some more code for proxy in nuxt.config.js. What all domains you are hitting to get data and which exact API returning data if you can share this! – Hardik Shah Jun 10 '20 at 12:49
  • I have added my Nuxt configuration. An example query is as follows: http://archive.org/download/mbid-8292af05-f08d-412a-acff-a9938b15d0be/index.json. Note the redirect that occurs. – Lachlan Jun 11 '20 at 05:47
  • Thanks! I checked for http://archive.org/download/mbid-8292af05-f08d-412a-acff-a9938b15d0be/index.json and worked fine for all browsers like chrome, firefox, IE11, edge – Hardik Shah Jun 11 '20 at 06:03
  • 1
    With the dynamic redirects, I think the resource might have to be fetched server-side (e.g., via Firebase Functions) to avoid the CORS errors. – tony19 Jun 11 '20 at 06:08
  • @tony19 I believe that'll be my best bet, too, and I've been looking into it for a little while now. If there's no way to go about this client-side I'll just do that. – Lachlan Jun 11 '20 at 06:16

1 Answers1

1

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
    }
Community
  • 1
  • 1
Michal Levý
  • 33,064
  • 4
  • 68
  • 86