СРЕДНЯЯ ошибка стека.«Невозможно установить заголовки после их отправки клиенту»

Question

У меня есть приложение стека MEAN, которое я пытаюсь устранить.Я выделил проблему, но я не уверен, как это исправить, вот код.Я считаю, что позиция, в которой находится ошибка, помечена как таковая.

import { Component, OnInit } from '@angular/core';
import { AuthService } from '../../services/auth.service';
import { Router } from '@angular/router';

@Component({
  selector: 'app-success',
  templateUrl: './success.component.html',
  styleUrls: ['./success.component.css']
})
export class SuccessComponent implements OnInit {
  user:Object;

  constructor(
    private authService:AuthService,
    private router:Router) { }

  ngOnInit() {
    this.authService.getProfile().subscribe(profile => { //THIS CALL TO GET PROFILE CAUSES THE ERROR
      console.log("GOT HERE (IN SUCCESS)");
      this.user = profile.user;
    },
    err => {
      console.log("ERROR" + err);
      return false;
    });
  }

  onLogoutClick(){
    this.authService.logout();
    this.router.navigate(['/']);
    return false;
  }
}

С помощью метода get Profile () здесь

import { Injectable } from '@angular/core';
import { Http, Headers } from '@angular/http';
import "rxjs/add/operator/map";
import { tokenNotExpired } from 'angular2-jwt';

@Injectable()
export class AuthService {
  authToken: any;
  user: any;

  constructor(private http:Http) { }

  registerUser(user) {
    let headers = new Headers();
    headers.append('Content-Type','application/json');
    return this.http.post('http://localhost:3000/users/register', user, {headers: headers}).map(res => res.json());
  }

  authenticateUser(user) {
    let headers = new Headers();
    headers.append('Content-Type','application/json');
    return this.http.post('http://localhost:3000/users/authenticate', user, {headers: headers}).map(res => res.json());
  }

  getProfile() {
    let headers = new Headers();
    this.loadToken();
    headers.append('Authorization', this.authToken);
    headers.append('Content-Type','application/json');
    console.log("GOT HERE (IN getProfile)");
    return this.http.get('http://localhost:3000/users/success', {headers: headers}).map(res => res.json()); //PROBLEM IS HERE
  }

  loadToken() {
    const token = localStorage.getItem('id_token');
    this.authToken = token;
  }

  loggedIn() {
    return tokenNotExpired('id_token');
  }

  storeUserData(token, user) {
    localStorage.setItem('id_token', token);
    localStorage.setItem('user', JSON.stringify(user));
    this.authToken = token;
    this.user = user;
    console.log("GOT HERE...");
  }

  logout() {
    this.authToken = null;
    this.user = null;
    localStorage.clear();
  }
}

Любая помощь будет принята с благодарностью.Я видел подобные посты, но они не помогли мне в этом случае.

Также вот маршрут

router.get('/success', passport.authenticate('jwt', {session:false}), (req, res, next) => {
    const user = req.user;
    console.log("GOT HERE (IN the route file)");
    return res.json({user: user});
    //return res.json({success: true, msg: 'user is found'});
});

Answer 1

Вы делаете почти все правильно, но вам не нужно устанавливать тип контента от angular service.Angular выполнит эту работу автоматически за вас.

В случае, если вы пытаетесь отправить свой токен авторизации с вашим запросом API, попробуйте следующий шаблон:

Вместо вызова вашей функции для загрузкитокен для вас попробуйте вызвать localalstorage непосредственно из вашей функции.

Пример

getProfile() {
  const headers = new Headers()
  .set('Authorization', localStorage.getItem('id_token'));
  console.log("GOT HERE (IN getProfile)");
  return this.http.get('http://localhost:3000/users/success', {headers: headers}).map(res => res.json()); //PROBLEM IS HERE
}

Или, если хотите, вы можете инициализировать переменную в вашем сервисном файле и получитьэто значение только один раз из локального хранилища.

token = localStorage.getItem('id_token');

Обновление моего ответа, чтобы вы могли использовать новый HttpClient, который обеспечивает angular.

Импортировать новый модуль HttpClient и затем создать объект вваш конструктор

import { HttpClient, HttpHeaders} from '@angular/common/http';

constructor(private http: HttpClient) { }