Angular 7 标头未设置答案

【问题标题】：Angular 7 Headers aren't getting setAngular 7 标头未设置
【发布时间】：2019-11-04 00:57:23
【问题描述】：

我正在使用 Angular 7 并创建了一个拦截器以在每个请求中包含身份验证令牌。

这是我的拦截器代码：

import { Observable } from 'rxjs';

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler, HttpEvent } from '@angular/common/http';

@Injectable()
export class JwtInterceptor implements HttpInterceptor {
  constructor() { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
    const token = localStorage.getItem('authToken');
    if (token) {
      request = request.clone({
        setHeaders: {
          authorization: token
        }
      });
    }
    return next.handle(request);
  }
}

验证身份验证令牌的节点api：

const jwt = require('jsonwebtoken');

function verifyToken(req, res, next) {
    var token = req.headers['authorization']; // Coming Undefined 
    if (!token)
        return res.status(403).send({ auth: false, message: 'No token provided.' });
    jwt.verify(token, 'top_secret', function (err, decoded) {
        if (err)
            return res.status(500).send({ auth: false, message: 'Failed to authenticate token.' });
        // if everything good, save to request for use in other routes
        req.userId = decoded.user.email;
        next();
    });
}

module.exports = verifyToken;

使用 Postman 访问 API 时一切正常，但使用 Angular 代码发送请求时，节点 API 未接收到标头。

这种奇怪行为的可能原因是什么？

【问题讨论】：

@lealceldeiro，是的，我试过这个，发现它不是真正的错误。编辑了我的代码。
Javascript 区分大小写字符。正如 lealcedeiro 所提到的，您正在设置 Authorization 标头，同时期待 authorization。但是，您也没有收到Authorization，所以这不是问题。您是否在发出请求时检查了您的网络选项卡以确认标头已被注入到请求中？
@TimVN，是的，我没有获得授权或此授权的任何值。我已经用网络标签详细信息更新了问题。
你试过request = request.clone({ setHeaders: { 'Authorization': token }, withCredentials: true });
你的JwtInterceptor被正确调用了吗？

标签： javascript node.js angular typescript angular-http-interceptors

【解决方案1】：

我在拦截器和克隆请求以及授权时遇到了类似的问题。

我必须添加内容类型并接受标头并告诉服务器它是 json：

  setHeaders: {
    'Content-Type' : 'application/json; charset=utf-8',
    'Accept'       : 'application/json',
    'Authorization': '' // your token
  }

【讨论】：

我尝试过这种方式，但结果是一样的。标题与我在问题中分享的内容没有改变。

【解决方案2】：

试着那样做

request.clone({
      headers: request.headers.set(
        'Authorization',
        localStorage.getItem('token')
      )
    })

【讨论】：

【解决方案3】：

您显示的屏幕截图是针对 OPTIONS 请求的，CORS 是必需的。你需要在nodejs中启用CORS

首先，安装cors模块

npm install cors

然后在你的 nodejs 后端使用它

var cors = require('cors');
app.use(cors());

【讨论】：

谢谢大卫，它成功了。但我仍然很困惑，为什么之前它在 Postman 上运行良好？
@ArjunSingh Postman，在提出此类请求时，请代表您在幕后做一些事情。它这样做的原因之一是为了避免例如 CORS 错误。
@ArjunSingh：CORS 仅由浏览器实现，而不是由 POSTMAN 等客户端实现。这就是为什么使用 POSTMAN 时没有 OPTIONS 请求的原因