首页 > 解决方案 > Angular 7 标头未设置

问题描述

我正在使用 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 时,一切正常,但是当使用角度代码发送请求时,节点 API 不会接收到标头。

从角度发送的请求标头

从 Postman 发送的请求标头

网络选项卡详细信息

从浏览器发送的请求对象 这种奇怪行为的可能原因是什么?

标签: javascriptnode.jsangulartypescriptangular-http-interceptors

解决方案


您显示的屏幕截图是CORS所需的 OPTIONS 请求。您需要在 nodejs 中启用 CORS

一、安装cors模块

npm install cors

然后在你的 nodejs 后端使用它

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

推荐阅读