angular - 额外的字符正在以角度的 API URL 中添加

Question

环境文件

export const environment = {
    production: false,
    name: 'local',
    apiUrl: 'https://dev.xyz.com/v1',
};

API服务

login(input: ILogin): Observable<any> {
    Common.showConsoleLog('demoAPIReq', input);
    const url1 = 'https://dev.xyz.com/v1/auth/login'
    const url = `${environment.apiUrl}${consts.LOGIN}`;
    return this.http.post(url, input, { 
        headers: Common.authHeader(), observe: 'response'
    }).pipe(tap (data => Common.showConsoleLog('demoAPIRes', data)),
    catchError(this.handleError('login'))
);

通用文件

static authHeader(): any {
    const httpBearerOptions = {
        headers: new HttpHeaders({
            'Content-Type': 'application/json',
        }),
    };
    return httpBearerOptions.headers;
}

常量文件

export const consts = {
    ROUTE_HOME: 'home',
    ROUTE_LOGIN: 'login',
    ROUTE_REGISTER: 'register',
    ROUTE_DASHBOARD: 'dashboard',
    LOGIN: '​/auth/login',
};

如果我在 post api 中传递 url1，那么它的工作正常，也const url3 = environment.apiUrl + '/auth/login';可以正常工作，但我连接字符串，const url = `${environment.apiUrl}${consts.LOGIN}`; 然后当我签入网络选项卡时，它会在 url 中添加一些奇怪的额外字符，如下所示

Answer 1

目前尚不清楚是什么consts.LOGIN，但这看起来像是有问题的区域。您在 URL 中看到的“额外字符”是 的 URL 编码版本consts.LOGIN，因此您可能需要修复该值或在必要时对其进行编码/解码。

const someVal = "some value with spaces";
const encoded = encodeURIComponent(someVal);
const decoded = decodeURIComponent(encoded);
console.log('encoded', encoded);
console.log('decoded', decoded);

我也相信您想/在您尝试构建的 URL 中添加一个：

const url = `${environment.apiUrl}${consts.LOGIN}`;

应该是：

const url = `${environment.apiUrl}/${consts.LOGIN}`;