为何Axios请求图片URL时响应Content-Type为undefined？

问题根源 #

Axios会自动把响应头的所有键名转成小写，你在控制台看到的Content-Type，实际在对象里对应的键是content-type，所以用大写键名访问自然拿不到值。

修正后的完整代码 #

// 先初始化验证通过的数组，避免可选链push失效
const validatedImgURLArray = [];

await Promise.all(imageURL?.map(async (item) => {
  // 只处理HTTPS协议的URL
  if (!item?.startsWith('https')) return;

  try {
    const image = await axios.get(item, {
      responseType: 'arraybuffer',
      // 加个超时，防止无效请求卡着
      timeout: 5000
    });

    const contentType = image.headers['content-type'];
    const server = image.headers['server'];

    // 简化图片类型校验，同时检查服务器是否为Cloudinary
    const allowedImageTypes = ['image/png', 'image/jpeg', 'image/jpg'];
    if (allowedImageTypes.includes(contentType) && server === 'Cloudinary') {
      validatedImgURLArray.push(item);
    }
  } catch (error) {
    console.error(`URL ${item} 验证失败:`, error.message);
  }
}) || []); // 处理imageURL为undefined的情况，避免map报错

几个重要的优化点 #

• headers键名小写：记住Axios返回的headers所有键都是小写，比如content-type、server，别再用大写的键名访问。
• 数组提前初始化：不要用validatedImgURLArray?.push，如果数组没初始化，可选链会直接跳过push操作，导致有效URL加不进去。
• 简化类型判断：用数组includes替代一堆或条件，后续要加新类型直接往数组里加就行，更方便维护。
• 超时设置：给请求加个超时时间，避免一些无效链接一直占用请求资源。
• 错误信息具体化：catch里输出具体出错的URL，排查问题时能快速定位到哪个链接有问题。
• 空值兜底：imageURL?.map(...) || []确保当imageURL是undefined时，Promise.all不会因为收到undefined参数而报错。

内容的提问来源于stack exchange，提问作者valve