Угловой интерфейс не получает соответствующего ответа на запрос http от экспресс-сервера

Question

Я использую Angular 7 для отправки http-запроса к бэкэнд-коду Express 4, но в ответ получаю ответ 404. Я думаю, что это может быть проблема с тем, как я указал путь для http-запроса, но не уверен. Это первый раз, когда я пытаюсь что-то подобное. Я установил файл proxy.conf.js в Angular, чтобы разрешить общение из разных источников (angular работает на localhost: 4200, express на localhost: 8085). Мой экспресс-код сохраняется в C: / ABC / myapp. Вот соответствующий код:

Файл угловой proxy.conf.js:

{
  "/": {
    "target": "http://localhost:8085",
    "secure": false,
    "logLevel": "debug"
  }
}

Угловой сервисный код, который отправляет http-запрос:

export class ContactUsService {
private url = '/contactus';
private result: any;
message: string;

addMessage(contactUsMessage: contactUsInterface): Observable<contactUsInterface> {
  return this.http.post<contactUsInterface>(this.url, contactUsMessage). (retry(3));
};

constructor(private http: HttpClient) {}
};

Экспресс app.js код:

var bodyParser = require('body-parser');
var cookieParser = require('cookie-parser');
var createError = require('http-errors');
var express = require('express');
var logger = require('morgan');
var mongoose = require('mongoose');
var path = require('path');
var winston = require('winston');
var contactUsRouter = require(path.join(__dirname, 'routes', 'contactUs'));
var app = express();

app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'ejs');
app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));
app.use(cookieParser());
app.use(express.static(path.join(__dirname, 'public')));
app.use('/contactus', contactUsRouter);

app.use(function(req, res, next) {
  next(createError(404));
});
app.use(function(err, req, res, next) {
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};
  res.status(err.status || 500);
  res.render('error');
});

module.exports = app;

код contactUs.js (для contactUsRouter):

var express = require('express');
var router = express.Router();
var contactUsMessage = require('../models/contactUsMessage');

  router.route('/contactus')
    .get(function(req,res,next){
      res.send("Hello")
    })
    .put(function(req,res,next){
      res.send("Hello")
    });

module.exports = router;

Когда я попадаю на страницу contactus (url: localhost: 4200 / contactus) и выполняю кнопку отправки формы, я получаю следующие ошибки: В консоли браузера: «HTTP404: НЕ НАЙДЕН - сервер не нашел ничего, соответствующего запрошенному URI (универсальному идентификатору ресурса). (XHR) POST - http://localhost:4200/contactus"

В журнале npm: "POST / contactus 404 3.081 ms - 2128 Ошибка: не удалось найти представление «ошибка» в каталоге представлений «C: \ ABC \ myapp \ views».

Какие-нибудь мудрые слова о том, что я делаю неправильно?

Answer 1

Ваш прокси-файл не работает должным образом.

Запросы все еще пытаются найти маршрут метода POST / contactus в угловом приложении, работающем через порт 4200 ((XHR) POST - http://localhost:4200/contactus), который не существует и следовательно, вы получаете 404.

Убедитесь, что вы выполнили шаги, указанные на официальном веб-сайте angular - Добавьте прокси-сервер для внутреннего сервера - angular.io

Рекомендуется использовать путь прокси / api вместо / . Как то так

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

Надеюсь, это поможет

Answer 2

В настоящее время вы выставляете маршрут POST /contactus/contactus, потому что вы задаете базовый маршрут с помощью оператора app.use('/contactus', contactUsRouter);, а затем добавляете / добавляете дополнительный / дополнительный /contactus с регистрацией маршрутов POST / PUT.

Попробуйте изменить маршрут POST на путь только на '/':

var express = require('express');
var router = express.Router();
var contactUsMessage = require('../models/contactUsMessage');

  router.route('/')
    .get(function(req,res,next){
      res.send("Hello")
    })
    .post(function(req,res,next){
      res.send("Hello")
    });

module.exports = router;

Надеюсь, это поможет!