React应用中API返回图片无法在img标签显示问题求助

React应用中尝试展示API提供的图片时，仅显示破碎图片图标，相关细节如下：

• API端发送文件的TypeScript代码：

router.get("/test", UserController.AuthenticationMiddleware, (req, res, next) => {
    res.sendFile(path.join(EnvironmentHelper.ImageStore, "test.jpg"));
});

• 前端图片标签代码：

<img src="http://localhost:3001/test"/>

• 浏览器网络请求状态为200 OK，将图片链接在新标签页打开可正常显示，但应用内无法加载。

• 检查CORS配置：React应用与API分属不同端口（如localhost:3000和localhost:3001），属于跨域场景。若API未正确配置CORS，浏览器可能拦截图片资源。需在API端添加CORS中间件，允许React应用所在域名的请求。
• 确认响应头Content-Type：确保API返回的响应头包含Content-Type: image/jpeg。如果sendFile未自动识别正确MIME类型，可手动指定：

  res.sendFile(path.join(EnvironmentHelper.ImageStore, "test.jpg"), {
      headers: { "Content-Type": "image/jpeg" }
  });
  

• 排查认证中间件影响：API接口使用了AuthenticationMiddleware，新标签页打开图片时可能未携带认证凭证，但应用内请求时若未正确传递（如Cookie、Token），中间件可能返回非图片内容（如未授权页面）。可临时移除中间件测试，或确保前端请求图片时携带必要认证信息。
• 验证React代理配置：若React应用配置了代理（如package.json中的proxy字段），需确认/test路径被正确转发到API服务器，避免代理规则导致请求异常。
• 清除浏览器缓存：浏览器可能缓存了错误的响应内容，导致应用内加载失败。可通过强制刷新页面（Ctrl+Shift+R）或清除缓存后重试。

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