Angular 2 JWT x-access-token答案

【问题标题】：Angular 2 JWT x-access-tokenAngular 2 JWT x-access-token
【发布时间】：2017-11-27 10:25:40
【问题描述】：

我在请求标头中设置 JWT 时遇到问题。以下是我构建请求的方式：

const headers = { 'x-access-token' : this.token };
const config = { headers: headers };
return this.http.get(this.allStudentsUrl, config)
    .toPromise()
    .catch((error) => this.handleError(error))
    .then((response) => this.handleStudents(response));

当我逐步完成时，这看起来很完美，但它是通过带有令牌的服务器来的。在服务器上，标头如下所示：

-= 编辑 =-

为了回答一些问题，我实际上开始使用 Headers 和 RequestOptions 类，这给了我奇怪的结果，所以我转而使用对象文字来尝试简化。这就是我所拥有的：

let headers = new Headers();
headers.append('x-access-token', this.token);
let config = new RequestOptions({ headers: headers });
return this.http.get(this.allStudentsUrl, config)
    .toPromise()
    .catch((error) => this.handleError(error))
    .then((response) => this.handleStudents(response));

但是当我将标记附加到标头时，它只会重复值中的键。这是调试窗口的屏幕截图。

如您所见，即使我将键设置为 x-access-token 并将值设置为令牌（我检查它以验证它实际上是令牌），标头也将 x-access-token 作为键和值。

我也可以通过检查来验证令牌是否是正确的令牌。这是一个截图：

--== 更多信息 ==--
如果我从邮递员那里发送请求，它就可以工作。这是 Postman 的请求：

这就是通过 Node 实现的：

这是我在 Angular 中的要求：

这就是通过 Node 实现的：

【问题讨论】：

你可以尝试使用 angulars Headers & RequestOptions 类 (blogs.msmvps.com/theproblemsolver/2016/12/16/…)
@LLai 我以这种方式开始并遇到了同样的问题。这是我试图简化的结果。请查看我的编辑。
this.token 设置在哪里？是否可能是相同的字符串'x-access-token'？
在我验证用户时设置。这不是同一个字符串。我会发一张照片。
您发布的调试窗口是正确的。 _normalizedNames 仅包含标题键。如果您查看 _headers，您应该会看到实际值

标签： angular angular2-jwt

【解决方案1】：

你需要创建类似的选项

let headers = new Headers();
headers.append('Content-Type', 'application/json');
headers.append('Authorization': 'Bearer ' + this.token);

let options = new RequestOptions({ headers: headers });

return this.http.get(this.allStudentsUrl, options);

【讨论】：

AFAIK，像 OP 那样使用对象文字没有问题。我很确定这不是问题。
我一开始就是这样，我认为出了点问题，所以我简化了。我会用这些信息更新我的问题。
您有什么问题吗？

【解决方案2】：

后端：

首先，您需要配置后端服务器以在响应中发送这些标头：

Access-Control-Allow-Headers:x-access-token
Access-Control-Allow-Methods:GET,PUT,POST,DELETE,OPTIONS
Access-Control-Allow-Origin:*
Access-Control-Expose-Headers:x-access-token

前端： 初始化标题：

const headers = new Headers({'Content-Type': 'application/json; charset=utf-8'});
const options = new RequestOptions({headers: headers});

添加 jwt/其他自定义标头：

options.headers.set('x-access-token', 'my-token'));
options.headers.set('additional-info', 'my-info'));

http 请求：

this.http.post(url, body, options)
        .subscribe((res: Response) => {
      // Write custom code here
}
this.http.get(url, options)
        .subscribe((res: Response) => {
      // Write custom code here
}

【讨论】：

这看起来很有希望！我会尽力让你知道！
这不起作用。我想知道这是否是我发送令牌的方式，因为我可以让它与 Postman 一起使用。

【解决方案3】：

对于那些偶然发现这一点的人（很可能包括我自己在另外六个月内），问题出在：

因为我在请求中添加了自定义标头，所以浏览器首先发送了一个 CORS OPTIONS 请求，以查看服务器是否愿意接受 GET 请求。我没有对那个请求做任何特别的事情，浏览器不知道如何解释响应，所以它没有发送实际的 GET 请求。这就是我在access-control-request-headers 字段中看到我的标题的原因。浏览器在发送任何实际数据之前试图询问服务器这些标头是否正常。我通过使用以下代码在我的服务器中处理 CORS 来修复它：

const cors = require('cors');
app.use(cors({ origin: '*', optionsSuccessStatus: 200 }));

【讨论】：