使用Image标签发起HTTP请求遇重定向：能否拦截及后台逻辑？

我有如下代码片段，并非用于加载图片，而是作为HTTP请求调用接口：

let doCall = (url: URL, params: object): Promise<void> => {
      return new Promise(resolve => {
        ...
        let img = new Image();

        img.addEventListener('load', () => resolve());
        img.addEventListener('error', () => resolve());
        window.setTimeout(() => resolve(), this.maxCallDelayMs);

        img.src = url.toString();
      });

但目标HTTP端点会产生数量不定的重定向，我希望在JavaScript中拦截这些重定向（并非阻止重定向，而是获取端点在重定向过程中丰富的、对代码执行有价值的请求参数信息）。

我知道若使用如下原生AJAX请求：

return new Promise(resolve => {
        ...
        const httpRequest = new XMLHttpRequest();
        httpRequest.open('GET', url.toString());
        httpRequest.send();

        httpRequest.onreadystatechange = function () {
          ...
          resolve();
        };
      });

根据相关资料，无法拦截这类请求的重定向。那使用Image标签调用接口的情况是否相同？即浏览器会自动完成所有重定向，最终以200 HTTP状态码结束重定向链？

和XMLHttpRequest的情况完全一致：浏览器会自动完成Image标签请求的所有重定向，你无法直接拦截或获取重定向过程中的中间请求/响应信息。

具体原因如下：

• 浏览器对Image这类资源请求的重定向处理是完全透明的，只会返回最终的响应结果（成功加载或错误），中间的3xx重定向步骤不会暴露给前端JavaScript。
• Image标签仅提供load和error两个核心事件，这两个事件只会在最终请求完成时触发，不会提供任何关于重定向链的细节——比如中间跳转的URL、状态码或响应头信息。
• 你无法追踪每一步重定向的过程，浏览器会自动跟随重定向，直到拿到最终资源或触发超时、错误。

如果必须获取重定向过程的完整信息，唯一可行的方案是通过服务器端代理：

• 前端请求自己的后端接口，由后端发起请求并追踪所有重定向步骤，将收集到的中间信息（如跳转URL、响应参数等）返回给前端。
• 这种方式不受浏览器同源策略和资源请求限制的影响，能完整获取重定向链的所有细节。

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