使用DOM创建HTML元素时触发额外服务器请求的问题

问题根源 #

从你提供的请求日志GET /brands/undefined可以直接定位问题：某个DOM元素的资源路径被设置为undefined，浏览器将其解析为当前页面的相对路径，从而触发了额外请求。

结合你的代码来看，罪魁祸首是这一行：

img.src = vehicle.thumbnail;

当vehicle.thumbnail字段为空、未定义，或者是一个无效的相对路径时，浏览器会默认以当前页面URL（/brands/dodge）作为基础路径，尝试请求/brands/undefined，这就是你看到的二次请求的原因。

解决方案 #

1. 校验数据源
   先检查后端渲染时传入的vehicles数据，确认每个vehicle对象的thumbnail字段是否存在，且值为有效的图片路径（可以是完整HTTP URL，也可以是相对于当前站点根目录的路径，比如/images/thumbnails/xxx.png）。

2. 前端代码容错处理
   在设置图片src前增加判断，避免传入无效值：

   // 方案一：用默认图片替代无效路径
   img.src = vehicle.thumbnail || '/images/default-vehicle-thumb.png';
   
   // 方案二：移除无效的src属性，避免触发请求
   if (vehicle.thumbnail) {
     img.src = vehicle.thumbnail;
   } else {
     img.removeAttribute('src');
     // 可选：可以给img设置一个占位类，用CSS显示默认样式
     img.classList.add('placeholder-thumb');
   }
   

3. 额外优化（可选）
   虽然不会导致当前的额外请求，但建议也对anchorTag.href做同样的校验，避免生成无效链接：

   anchorTag.href = vehicle._id ? `/vehicles/${vehicle._id}` : '#';
   

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