javascript - Angular 7 标题未设置

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

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

这是我的拦截器代码:

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

用于验证身份验证 token 的 Node 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 代码发送请求时, Node API 未收到 header 。

Request header when sent from angular

Request header when sent from Postman

Network Tab Details

Request object sent from browser 这种奇怪行为的可能原因是什么?

最佳答案

您显示的屏幕截图用于 OPTIONS 请求,CORS 需要.你需要在 nodejs 中启用 CORS

首先,安装cors模块

npm install cors

然后在你的nodejs后台使用它

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

关于javascript - Angular 7 标题未设置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56698948/

相关文章:

javascript - 如何订购对象中的项目?

javascript - 将 Node 请求或 axios 与流一起使用来下载和解压缩文件未按预期处理背压?

angular - 'modal' 不是已知元素 : in angular2

angular - 从 sails.js 提供 Angular 2 CLI

javascript - 谷歌地图 - 点击按钮触发搜索框

javascript - three.js - 帮助将缩放缩放添加到 css3d_youtube 演示 - 轨迹球控件弄乱了相机位置

node.js - momentJS 获取 UTC 时间戳

javascript - MatDatepicker : No provider found for DateAdapter. 您必须在应用程序根目录中导入以下模块之一:MatNativeDateModule

javascript - 在 Ember 的本地存储中,对象属性的值没有被更改

属性名称模式的 JavaScript/CSS 选择器