Angular Interceptor修改请求URL不生效反拼接原域名问题咨询

• 你定义的目标URL没有携带http://或者https://协议前缀，Angular HttpClient会将不带协议的URL识别为相对路径，自动拼接在当前页面的域名前缀之后，这就是你控制台打印的URL看起来正确，但实际请求会多拼接一层原域名的核心原因。
• 额外注意：如果你的req.url本身已经带有域名或公共路径前缀，还可能出现重复拼接的问题，建议先加判断逻辑，只处理你需要重定向的特定请求。

修改后的拦截器代码如下：

@Injectable()
export class CustomHttpInterceptor implements HttpInterceptor {
  intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    // 建议先匹配需要重定向的请求特征，避免所有请求都被篡改
    if (req.url.includes('你要匹配的导出路径标识')) {
      console.log("initial request: ", req)
      // 目标URL必须补全http/https协议前缀，动态从地址栏获取时也要记得拼接协议
      const baseUrl = 'http://10.0.0.211:8080/Vanta/exports/';
      const newReq = req.clone({
        url: baseUrl + req.url
      });
      console.log("Dupe Req: ", newReq.url)
      return next.handle(newReq);
    }
    // 不需要重定向的请求直接放行
    return next.handle(req);
  }
}

• 如果你是从地址栏动态获取域名，可直接从window.location.origin提取协议和域名部分，再替换为你需要的端口即可，无需手动硬编码协议。
• 如果原始请求URL已经包含多余的路径前缀，建议提前裁剪掉重复部分，避免拼接后路径错误。

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