HTTP получить запрос с Angular 5 и NodeJS

Question

У меня 3 года опыта в веб-разработке, но я всегда использовал MVC в рамках .NET Framework.Недавно я начал разработку стекового проекта MEAN, но дошел до того, что мне нужно больше обучения или помощи.В настоящее время я могу успешно получать и отправлять запросы, но у меня возникают проблемы с выполнением запроса получения, когда мне нужно получить элемент по идентификатору.Ниже приведен код, который я использую.

код nodeJS

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

Маршрутизатор:

router.get('/userProfile/:id', auth, ctrlProfile.userProfileRead);

Контроллер:

module.exports.userProfileRead = function(req, res, next) {
  const id = req.params.id
  User.findById(id)
  .select(fields)
  .exec()
  .then((result) => {
    const response = {
      count: result.length,
      data: result.map((result) => {
        return {
          id: result._id,
          firstname: result.firstname,
          lastname: result.lastname,
          email: result.email,
          username: result.username
        }
      })
    };
    if (result.length > 0) {
      res.status(200).json(response)
    } else {
      res.status(404).json({
        message: `Successfully fetched ${route_name}s. However, no ${route_name}s have been created.`
      })
    }
  })
  .catch((err) => {
    console.log(err);
    res.status(500).json({
      error: err
    });
  });
};

Угловой код 5

Я считаю, что это мой проблемный ребенок.

Служба:

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs/Observable';
import { map } from 'rxjs/operators/map';
import { Router } from '@angular/router';
import { AuthenticationService, UserDetails } from './authentication.service';
import { UserProfile } from './models/UserProfile';

@Injectable()
export class DataService {

  userDetails: UserDetails;

  constructor(private http: HttpClient, public auth: AuthenticationService) { 
this.userDetails = auth.getUserDetails();
 }

  getUserProfile(id: string): Observable<UserProfile> {
return this.http.get<UserProfile>(`/api/userProfile/${id}`, { headers: { Authorization: `Bearer ${this.auth.getToken()}` }});
  }
}

Конфигурация прокси

{
  "/api": {
"target": "http://localhost:3000",
"secure": false
  }

    }

Прошу прощения, если форматирование кода плохое.Я новичок в задании вопросов о переполнении стека, но это поставило меня в тупик, и я не смог найти в Интернете никакой информации о том, почему это не работает для меня.

Любая помощь приветствуется.

Спасибо

РЕДАКТИРОВАТЬ:

Проблема, с которой я сталкиваюсь, заключается в том, что когда я могу достичь конечной точки, запрос истекает, и я получаюконсольная ошибка «неизвестного URL».

РЕДАКТИРОВАТЬ:

Вот рабочий код.Единственная разница в моем запросе заключается в том, что я не отправляю параметры.

nodeJS

Маршрутизатор:

router.post('/login', ctrlAuth.login);

Контроллер:

module.exports.login = function(req, res) {

if (req.body.ActiveDirectory)
  {
passport.authenticate('ldapauth', { session: false }), (req, res, next) => {
    console.log(req.body)
    res.status(200).json({ "message": "worked" })
}
  }

  else
  {
passport.authenticate('local', function(err, user, info){
  var token;


  // If Passport throws/catches an error
  if (err) {
    res.status(404).json(err);
    return;
  }

  // If a user is found
  if(user){
    token = user.generateJwt();
    res.status(200);
    res.json({
      "token" : token
    });
  } else {
    // If user is not found
    res.status(401).json(info);
  }
})(req, res);
  }

};

Angular5

Сервис:

  private request(method: 'post'|'get', type: 'login'|'register'|'profile'|'userProfile', user?: TokenPayload): Observable<any> {
let base;

if (method === 'post') 
{
  base = this.http.post(`/api/${type}`, user);
} 
else 
{
  base = this.http.get(`/api/${type}`, { headers: { Authorization: `Bearer ${this.getToken()}` }});
}

const request = base.pipe(
  map((data: TokenResponse) => {
    if (data.token) {
      this.saveToken(data.token);
    }
    return data;
  })
);

return request;
  }

Answer 1

Если вы используете Express v4, я не верю, что router.get () принимает более 2 параметров.Если вы используете промежуточное программное обеспечение для своей аутентификации, app.use () - это то, где это будет уместно.

Маршрутизатор

App.use

Кроме того, ваш маршрутизатор регистрирует /userProfile/:id вместо /api/userProfile/:id, что и вызывает ваш угловой код.Вы префикс /api где-то еще?

Answer 2

Обнаружена проблема: как только мы возвращаем переменную http-запроса, вызывающему компоненту необходимо было «подписаться» на запрос для получения данных.

this.data.profile(this.userDetails._id).subscribe(user => {
        this.userProfile = user;
      }, (err) => {
        console.error(err);
      });;  

Также параметры необходимо было передать впо-другому в запросе базы http.

this.http.get(`/api/${type}`, { headers: { Authorization: `Bearer ${this.getToken()}` }, params: { params }});

Answer 3

Вы не указали действительный URL.В вашем случае вы должны добавить http://localhost:3000 к URL-адресам, которые вы используете в настоящее время:

http://localhost:3000/api/userProfile/${id}