Angular front end not getting appropriate response for http request from express backend

Question

I'm using Angular 7 to send a http request to an Express 4 backend code, but keep getting a 404 response in return. I think it might be an issue with the way I've listed the path for the http request, but not sure. This is the first time I'm attempting something like this. I have set up a proxy.conf.js file in Angular to allow from cross origin communication (angular runs on localhost:4200, express on localhost:8085). My Express code is saved under C:/ABC/myapp. Here's the relevant code:

Angular proxy.conf.js file:

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

Angular service code which sends the http request:

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

Express app.js code:

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 code (for 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;

When I reach the contactus page (url: localhost:4200/contactus) and execute the submit button for the form, I get the following errors: In the browser console: "HTTP404: NOT FOUND - The server has not found anything matching the requested URI (Uniform Resource Identifier). (XHR)POST - http://localhost:4200/contactus "

In the npm log: "POST /contactus 404 3.081 ms - 2128 Error: Failed to lookup view "error" in views directory "C:\\ABC\\myapp\\views".

Any words of wisdom on what I'm doing incorrectly?

Answer 1

Currently you are exposing a route of POST /contactus/contactus because you are specifying a base route with the statement app.use('/contactus', contactUsRouter); , then adding/appending an additional/extra /contactus with the registration of the POST/PUT routes.

Try change the POST route to path to just '/' :

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;

Hopefully that helps!

Answer 2

Your proxy conf file is not working properly.

The requests are still trying to look for a POST method route /contactus in angular application running on port 4200 ((XHR)POST - http://localhost:4200/contactus ) which does not exist and hence you are getting a 404.

Make sure you have followed the steps mentioned on official angular website - Add Proxy for backend server - angular.io

It will be advisable if you use proxy path /api instead of / . Something like this

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

Hope it helps