Заголовки Angular 7 не устанавливаются - PullRequest
1 голос
/ 21 июня 2019

Я использую 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;

При обращении к API с помощью Postman все работает нормально, но при отправке запроса с использованием углового кода заголовки не принимаются в API узла.

Request header when sent from angular

Request header when sent from Postman

Network Tab Details

Request object sent from browser Что может быть причиной такого странного поведения?

Ответы [ 3 ]

3 голосов
/ 21 июня 2019

Снимок экрана, который вы показываете, относится к запросу OPTIONS, необходимому для CORS . Вам необходимо включить CORS в nodejs

Сначала установите модуль cors

npm install cors

Затем используйте его в своем бэкэнде nodejs

var cors = require('cors');
app.use(cors());
0 голосов
/ 21 июня 2019

Попробуй сделать так

request.clone({
      headers: request.headers.set(
        'Authorization',
        localStorage.getItem('token')
      )
    })
0 голосов
/ 21 июня 2019

У меня была похожая проблема с перехватчиком и клонированием запроса в сочетании с авторизацией.

Мне пришлось добавить тип контента, принять заголовки и сообщить серверу, что это json:

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