如何从 ISBN 得到可跨域访问的图书封面图片URL

在开发书摘查看器的过程中，需要为用户提供解析封面图片的服务。豆瓣虽然可以直接拼接 isbn 得到封面图片 URL，但不支持跨域，用 wp 代理也不行。经过探索，目前有两种较为稳定的方法。

方式一 使用 longitood.com 解析出的亚马逊图片 URL

前端请求

https://bookcover.longitood.com/bookcover?isbn=9787544771191

会得到：

json
{"url":"https://m.media-amazon.com/images/S/compressed.photo.goodreads.com/books/1696326313i/91974246.jpg"}

这样得到的图片支持跨域访问。但有的封面是找不到的。例如 9787532157129

方式二 使用无名图书的封面图片url

其实最简便的方法是使用 无名图书 的 图片链接，直接拼接 isbn 即可，例如：https://static.book345.com/covers/s/9787020174744.jpg

测试 isbn:

9787532157129
9787020174744
9787213116353

封面图片预览：

其他可能的方式

其实也可以用asin 直接构造链接，但是不知道怎么把 ibsn转成 asin

直接必应按 isbn 搜图片也能得到一些蛛丝马迹。例如 https://images-cn.ssl-images-amazon.com/images/I/51CBc9m20SL._SY344_BO1,204,203,200_QL70_.jpg

关于 URL 是否生效的检测

https://static.book345.com/covers/s/9787544774727.jpg

这样一个链接，我直接写在 img 里面，是能跨域请求到的。但由于担心不稳定，我希望在使用这之前，先检测一下是否能正常返回图片，于是我写了个函数去检测。

一开始是用 fetch api，发现总是失败，拿不到响应。

后来又用 new Image ，发现能成功，原因是：fetch 受 CORS 限制，图片不受。

js
  const newApiPromise = new Promise<string>((resolve, reject) => {
    const coverUrl = `https://static.book345.com/covers/s/9787544774727.jpg`;
    const img = new Image();
    const timeout = setTimeout(() => {
      reject(new Error('new_api_failed'));
    }, 10000);
    img.onload = () => {
      clearTimeout(timeout);
      resolve(coverUrl);
    };
    img.onerror = () => {
      clearTimeout(timeout);
      reject(new Error('new_api_failed'));
    };
    img.src = coverUrl;
  });

fetch 属于 AJAX 请求，浏览器会执行严格的 CORS 安全检查。

流程是这样的：

1. fetch 请求图片
2. 浏览器先发送一个预检请求（OPTIONS）
3. 检查目标服务器 是否返回允许跨域的响应头
4. 服务器没有返回允许跨域的头
5. 浏览器直接拦截请求，报 CORS 错误