Angular服务API调用URL在测试服务器解析异常问题求助

这种情况我之前也碰到过——其他服务都正常，唯独新写的Login服务在测试环境路径不对，核心原因基本是新服务没沿用全局的API路径配置规则，或者构建部署时的基础路径没设置到位。下面是具体的排查和解决步骤：

1. 检查Login服务的API路径写法 #

先看看你的Login服务是不是直接硬编码了根路径的API地址，比如：

// 错误示例：直接写根路径，没考虑测试环境的子应用目录
login(credentials) {
  return this.http.post('/api/auth/login', credentials);
}

而其他正常的服务应该是依赖了全局配置的基础URL，比如注入了统一的base地址，或者用了环境变量：

// 正确示例：使用全局配置的基础URL拼接路径
import { environment } from '../../environments/environment';

// ...

login(credentials) {
  return this.http.post(`${environment.apiBaseUrl}/auth/login`, credentials);
}

如果Login服务用了硬编码的/api/...，在测试服务器部署到/[App Name]/子目录时，浏览器会直接把请求发向服务器根目录的API，而不是子应用下的。

2. 验证测试环境的API基础URL配置 #

打开environment.prod.ts（测试/生产环境的配置文件），确认里面的API基础路径是不是包含了应用名称：

// environment.prod.ts
export const environment = {
  production: true,
  apiBaseUrl: '/[App Name]/api' // 这里必须和测试服务器的部署路径一致
};

要是这个配置里少了/[App Name]/前缀，所有用这个变量的服务都会路径错误，不过你其他服务正常，可能是Login服务没用到这个变量。

3. 确认Angular构建时的base href设置 #

部署到测试服务器之前，构建Angular应用时有没有指定正确的基础路径？必须用--base-href参数指定部署的子目录：

ng build --prod --base-href "/[App Name]/"

如果没加这个参数，Angular的相对路径解析会默认以服务器根目录为基准，新服务的请求自然会跳错路径。

4. 兜底排查：后端部署路径配置 #

虽然其他服务正常，但可以快速确认下.NET Core后端的部署配置——比如IIS里是不是把应用部署在/[App Name]/站点下，后端的路由有没有硬编码根路径。不过这个概率很低，毕竟其他服务都能正常访问。

按照上面的步骤查一遍，基本就能找到Login服务的配置漏洞，解决路径解析的问题。

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