Express 服务器无法接收 Angular HttpClient 发送的身份验证标头答案

【问题标题】：Express server can't recieve auth headers sent by angular HttpClientExpress 服务器无法接收 Angular HttpClient 发送的身份验证标头
【发布时间】：2019-10-20 01:32:42
【问题描述】：

我正在创建一个用户可以登录并查看其个人资料的应用。为此，我在服务器上有 enpdpoint：

router.get('/profile',
passport.authenticate('jwt', {session:false}),
async(req, res) => {
    console.log(req.headers)
    try {
        let users = await usersDB.getAll();
        res.json({
            users: users,
            user: req.user
        });
    } catch (err) {
        console.log(err);

    }   
});

如果标头中有身份验证令牌，passport.authenticate('jwt', {session:false}) 行应该对用户进行身份验证。但就我尝试记录标题而言 - 他们没有这样的字段。等等登录按钮提交我做以下：

 public onLoginSubmit(): void {
    const user = {
      email : this.email,
      password : this.password
    }
    this.authService.authenticateUser(user).subscribe((data: any)=>{
      if(data.success){//here need to check response for success
        this.authService.storeUserData(data);
        this.router.navigate(['/user']);
      }else{
        this.router.navigate(['/login']);
      }
    });
 }

然后看看getProfile()：

    getProfile(){
      let headers = new HttpHeaders();
      this.loadToken();
      headers.set('Content-Type', 'application/x-www-form-urlencoded').set('Authorization', this.authToken);
      return this.http.get(`${this.url}profile/`, {headers:headers})
      .pipe(map(res => res))
    }

好吧，发送请求时，我收到了401 Unauthorized 但是使用邮递员，一切都很好。这是邮递员的代码：

GET /profile HTTP/1.1
Host: localhost:3000
: 
Content-Type: application/x-www-form-urlencoded
Authorization: Bearer eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJkYXRhIjp7Il9pZCI6IjVjZjU4NThiODhiZGRmM2M5ODYxYjU2ZCIsImZpbyI6IlRlbGVmdXMgSWxsaWEgQW5hdG9saXlvdmljaCIsInBhc3N3b3JkIjoiN2IzNGMxNzFmZmM2MWE2ZDYyZDljZTM5NDg0ZjM1NjNjMDY3Y2Q3ZTlhMDQ5ZjZkY2RjN2U5NzI2NWJjNTAwMWE2NjE5OTkxZjFjN2U3MTVjZjZkMDUzZThhZDNlMmQyZWIxNzQ1ZDI4NmRkMWJlOTVkNTdjNjg5MzA3OTI1YjMiLCJlbWFpbCI6ImlseWEuaXQzMzdAZ21haWwuY29tIiwiYXZhdGFyIjoiaHR0cHM6Ly9iaXQubHkvMklrMkc3ViIsImJpcnRoIjoiMTk3MC0wMS0xMVQwMDoyMjo1MC4wMDFaIiwibGljTnVtYmVyIjoiQUEyMzQyNTQyNjMiLCJzdGF0dXMiOiJ1c2VyIiwiX192IjowLCJhcHBsaWNhdGlvbnMiOltdLCJwZW5kaW5nIjp0cnVlfSwiaWF0IjoxNTU5NjQyNjI0LCJleHAiOjE1NjAyNDc0MjR9.iDt1lE5CziA05Wd2s1y536S0LyahGCRmwe6WsgYytzQ
cache-control: no-cache
Postman-Token: 5c4e2375-d8d0-43a0-87f8-25cd9a85c92f

【问题讨论】：

检查网络/选项卡和日志是否有错误，并检查发送/接收的数据。也许你也有一些 cors 问题？
@David，我已经这样做了两次。问题是我在请求标头中看不到令牌
我在您的代码中看不到您将令牌添加到 API 请求的位置
@David，对不起，更新了帖子（粘贴正确的方法）
嗯，正如下面的答案所示，这是因为HttpHeaders 是不可变的。

标签： angular express http authentication jwt

【解决方案1】：

HttpHeaders 是不可变的，所以试试吧（我猜你不需要设置 application/x-www-form-urlencoded）

     getProfile(){
      let headers = new HttpHeaders({
'Authorization' : this.authToken
});
      this.loadToken();
      return this.http.get(`${this.url}profile/`, {headers:headers})
      .pipe(map(res => res))
    }

如果您的身份验证是 Bearer，您将需要 'Authorization': 'Bearer '+'this.authToken'

【讨论】：