Angular服务中API调用的URL在测试服务器

Question

我有一个带有.NET Core REST Api后端的Angular 5应用程序 - 同一个项目的所有部分。

我发布到测试服务器，一切正常。我的服务对API的所有调用都已正确解析。然后我实现了一个Login服务，它在我的开发机器上工作正常，但URL在测试服务器中无法正确解析。

在测试服务器中，url解析为 [Machine Name] / api / auth / login 而不是 [Machine Name] / [App Name] / api / auth / login < / em>的

所有服务都在provider数组中专门在app.module.ts中定义，我发现Login服务和其他服务没有区别。

我通过使用 Location.prepareExternalUrl 解决了这个问题，但我想知道为什么这是必要的。对api的其他服务调用都不需要，并且它们仍然可以正常工作。

登录服务：

login(userName: string, password: string) {

    return this.httpClient.post<Token>(this.location.prepareExternalUrl('/api/auth/login'), { userName, password }).pipe(
        tap(res => this.setSession(res))
    ).shareReplay();
}

公司服务为例：

getAll(): Observable<Company[]> {

    return this.httpClient.get<Company[]>('api/companies');

}   

Answer 1

如果所有其他服务都正常工作，那么在我看来，由登录URL之前的前导斜杠/引起，这会将URL视为来自服务器根目录的绝对URL，这就是为什么应用程序的上下文路径 AppName 不是URL的一部分。

我通常在服务中使用以下方法来处理api URL。

`${environment.BASE_API_URL}/someService/`

然后在BASE_API_URL文件中定义特定于环境的environment.*.ts。这也允许我在一个地方更改api url并指向不同的环境，例如BASE_API_URL: 'http://localhost:8080/api'现在指向部署在我的localhost @ 8080上的api。

另外，请确保base href中的index.html根据相对网址的角度文档here正确定义