2

我在请求的标头中设置 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));

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

调试 WAT

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

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

看那个令牌！

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

邮差

这是通过 Node 实现的：

邮递员结果

这是我在 Angular 中的要求：

角度请求

这是通过 Node 实现的：

角度结果

4

3 回答 3

3

您需要创建选项，例如

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);
于 2017-06-23T19:33:17.613 回答
1

后端：

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

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
}
于 2017-07-02T07:29:20.730 回答
1

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

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

const cors = require('cors');
app.use(cors({ origin: '*', optionsSuccessStatus: 200 }));
于 2017-07-06T16:27:23.300 回答