Angular - 无法设置新的 HTTP 标头

Question

我正在尝试向我的请求添加授权令牌，但标头从未发送到 API，

    public getIndicators(params: Object): Observable<any> {
        const data = {params : params};
        let headers = new HttpHeaders();
        headers = headers.set('testHeader', 'test').set('test2', 'test3').set('Authorization', ' Bearer token');

        return this.http.post(API_URL + '/dashboard/getIndicators', data, {headers: headers});
    }

如果我将标头放入 Postman，则相同的发布请求可以在 Postman 上运行，所以我认为这可能是因为该应用程序是在 localhost 上提供的，所以我添加了

    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header always set Access-Control-Allow-Headers "*"

在我的 apache2 conf 中，这个不需要 Auth 标头的简单请求确实有效

    public login(formUsername: string, formPassword): Observable<any> {
    const data = {
      impersonate: formUsername,
      fmboPassword: formPassword
    };

    return this.httpClient.post<any>(API_URL + '/user/superlogin', data, { observe: 'response' });
  }

编辑：对项目架构的一点说明

我在我的 localhost:4200 上运行 angular 应用程序，并在端口 80 上的 docker 容器（图像 php:7.2-apache）上获取了我的 PHP（CodeIgniter）api，我不知道什么会阻止它。

这是我在 Dockerfile 中设置的 apache2 conf

<VirtualHost *:80>

DocumentRoot "/var/www/html/"

ErrorLog "/var/log/apache2/sales-error.log"
CustomLog "/var/log/apache2/sales-access.log" common

<Directory "/var/www/html/">
    AllowOverride All
    Options FollowSymLinks
    Require all granted

    Header always set Access-Control-Allow-Origin "*"
    Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
    Header always set Access-Control-Allow-Headers "*"

</Directory>

Answer 1

以下应该可以解决问题。

return this.httpClient.post<any>(API_URL + '/user/superlogin', data, { observe: response', headers: new HttpHeaders({'token': 'hello1 ' });

如果您希望针对每个 BE 请求将此标头发送到服务器，您应该使用 HttpInterceptor。 https://angular.io/api/common/http/HttpInterceptor