Angular 2 个智威汤逊 x-access-token

Question

我在 header 中为我的请求设置 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 看起来像这样：

-=编辑=-

为了回答一些问题，我实际上开始使用 Headers 和 RequestOptions 类，这给了我奇怪的结果，所以我改用 object 文字来尝试简化.这是我的：

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

但是当我将令牌附加到 header 时，它只是重复值中的键。这是调试的屏幕截图 window.

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

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

--== 更多信息==--
如果我从 Postman 发送请求，它就会工作。这是 Postman 的请求：

这是通过 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

后端：

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

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

前端： 初始化 headers :

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

添加 jwt/other 自定义 headers :

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

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

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

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

Angular 2 个智威汤逊 x-access-token

Angular 2 JWT x-access-token

angular2-jwt

angular