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

Posted 2023-03-04

【中文标题】从封面艺术档案 (archive.org) API 中获取专辑封面会由于重定向导致 CORS 错误

【英文标题】：Fetching album art from the Cover Art Archive (archive.org) API leads to CORS errors due to redirects

【发布时间】：2020-09-27 03:26:44

【问题描述】：

我正在为MusicBrainz API 开发一个前端，它可以搜索艺术家及其版本（特别是发布组）。当我尝试通过 Axios 库的 Cover Art Archive 从发布组各自的 MusicBrainz ID (MBID) 中找到某个封面艺术时，我收到两个 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 存档 - 至少最初是这样。

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 的浏览器中。

【问题讨论】：

能否请您使用 Codepen 或 Codesanbox 添加完整代码以检查错误！

我已经用相关文件相应地更新了我的帖子。 gist.github.com/lachlantula/95acabbea3feefc2d153b5e27a58334f

感谢您添加要点。在 nuxt.config.js 中需要更多代理代码。如果您可以分享这些数据，您访问了哪些域以获取数据以及返回数据的确切 API！

我已经添加了我的 Nuxt 配置。示例查询如下：archive.org/download/mbid-8292af05-f08d-412a-acff-a9938b15d0be/…。注意发生的重定向。

使用动态重定向，我认为资源可能必须在服务器端获取（例如，通过 Firebase 函数）以避免 CORS 错误。

【参考方案1】：

编辑

由于您使用的是 @nuxtjs/proxy 中间件，而该中间件使用的是 http-proxy-middleware，您可以将代理配置为跟随重定向（默认情况下关闭） - 因此重定向响应不会返回给您的客户端，但代理会跟随服务器上的重定向并仅返回最终响应...

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

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

到：

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