Angular 6升级后HTTPClient异常：API调用重定向至localhost:4200

我来帮你一步步梳理这个问题，结合Angular 6的特性和你的配置来看，核心问题大概率出在拦截器的URL判断逻辑或者注册有效性上，咱们逐个排查：

一、先确认拦截器是否真的没被触发 #

首先要排除“拦截器没注册成功”的可能：在你的AuthInterceptor的intercept方法开头加一行日志或者断点，比如：

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  console.log('AuthInterceptor 触发，当前请求URL：', req.url); // 打印日志验证
  // 原逻辑...
}

如果控制台没输出这条日志，说明拦截器根本没被注册上，检查这几点：

• 确保AuthInterceptor已经正确导入到AppModule中（顶部要有import { AuthInterceptor } from './path-to-your-interceptor';）
• 确认providers里的HTTP_INTERCEPTORS配置没有拼写错误，multi: true必须加上（否则会覆盖其他拦截器）

二、检查URL判断逻辑是否失效 #

如果拦截器有触发，但没进入URL替换的分支，那就是req.url.startsWith('#myAPI#')的判断条件不成立。原因是：
Angular的HttpClient会自动把相对路径拼接上APP_BASE_HREF（你的配置是/），所以你发送的#myAPI#/Users实际会被处理成/#myAPI#/Users，这时候startsWith('#myAPI#')自然返回false，拦截器跳过了URL替换。

解决方法很简单，修改判断逻辑：

• 改成用includes判断URL中是否包含#myAPI#：

if (req.url.includes('#myAPI#')) {
  req = req.clone({
    url: req.url.replace('#myAPI#', 'http://localhost:0987/api'),
  });
}

• 或者先去掉APP_BASE_HREF前缀再判断（更严谨）：

let targetUrl = req.url;
const baseHref = '/'; // 也可以通过注入APP_BASE_HREF获取，更灵活
if (targetUrl.startsWith(baseHref)) {
  targetUrl = targetUrl.slice(baseHref.length);
}
if (targetUrl.startsWith('#myAPI#')) {
  req = req.clone({
    url: targetUrl.replace('#myAPI#', 'http://localhost:0987/api'),
  });
}

三、排查拦截器执行顺序冲突 #

Angular的拦截器是按注册顺序链式执行的，JwtModule内部也会注册一个JwtInterceptor。如果JwtInterceptor先执行，会不会提前修改了请求？不过从你的描述看，TranslateModule的请求正常，说明JwtInterceptor工作正常，这个可能性较低，但可以暂时注释掉JwtModule的配置，单独测试自定义拦截器是否能正常工作，排除冲突。

四、实用调试小技巧 #

• 用浏览器开发者工具的Network面板查看实际发送的请求URL，确认是否被正确替换成了http://localhost:0987/api/Users
• 检查服务器端是否配置了“404重定向到首页”，如果拦截器没替换URL，请求会发送到http://localhost:4200/#myAPI#/Users，服务器返回首页HTML，导致JSON解析报错（这正是你遇到的错误）

按照上面的步骤排查，应该能解决问题。

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