从封面艺术存档中获取专辑封面 (archive.org) API 由于重定向导致 CORS 错误

Question

我正在使用 Axios 库为 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 开发前端，我收到两个 CORS 错误：

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).

到目前为止我做了什么

经过一些研究，我意识到封面艺术档案馆不托管他们自己的图像；相反，访问他们的 API 会导致重定向到 Internet Archive API。因此，我直接去 IA API 寻找我需要的封面艺术，因为我也可以在那里用 MBID 找到它。这本身会导致 CORS 错误，但我正在使用代理（使用 Nuxt.js），这意味着我可以连接到 Internet Archive - 至少在最初 - 没有问题。

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

主要问题是 IA 然后再次重定向到一个动态且经常变化的目的地。因此，我无法预测重定向的去向，并且我无法避免上述 CORS 错误，即使是通过代理——Axios 在这里不使用它，这是可以理解的。

我对此进行了相当广泛的研究，但我无法找到如何在无法阻止重定向发生时防止这些错误出现的方法。

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)
    })
}

可以找到相关文件的代码 here。

我的Nuxt配置可以找到here.

值得注意的是，这些错误仅出现在 Firefox 中，而不会出现在其他基于 Chromium 的浏览器中。

Answer 1

编辑

因为你正在使用@nuxtjs/proxy中间件，它正在使用 http-proxy-middleware，您可以将代理配置为遵循重定向（默认情况下关闭） - 因此重定向响应不会 returned 到您的客户端，但代理将遵循重定向服务器和 return 只有最终响应...

将您的 nuxt.config.js 更改为：

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

至：

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

从封面艺术存档中获取专辑封面 (archive.org) API 由于重定向导致 CORS 错误

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

musicbrainz

cors

axios

nuxt.js

到目前为止我做了什么

编辑