Angular 2 JWT x-access-token

Question

我在我的请求标题中设置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作为密钥和价值。

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

- ==更多信息== -
如果我发送邮递员的请求它是有效的。这是邮递员的要求：

以下是Node发布的内容：

这是我在Angular中的请求：

以下是Node发布的内容：

Answer 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);

Answer 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
}

Answer 3

对于那些偶然发现这种情况的人（最有可能包括我自己在另外六个月内），问题是：

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

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