Guide to locating and resolving 404 errors in front-end and back-end integration between Angular and Node.js

This article explains in detail the root cause of HttpErrorResponse: 404 Not Found when the Angular front-end calls the Node.js back-end API. It focuses on key issues such as inconsistent routing configurations, mismatched basic paths, and hidden CORS failures, and provides immediately verifiable repair solutions.

This article explains in detail the root cause of `HttpErrorResponse: 404 Not Found` when the Angular front-end and back-end call the Node.js back-end API. It focuses on key issues such as inconsistent routing configurations, basic path mismatches and CORS hidden failures, and provides immediately verifiable repair solutions.

In Angular Node.js full-stack development, the front-end console reports HttpErrorResponse: 404 Not Found (such as POST http://localhost:8080/add 404), but the Postman call is successful - this is not a problem of the network or service not being started, but a typical symptom that the request path is not correctly matched by the backend . The core contradiction is that the request URL initiated by Angular is inconsistent with the routing path actually registered by Express .

? Key problem location: routing prefix misplacement

Observe your server code:

 // server.js
app.use('/add', patientrouter); // ← Mount middleware to the '/add' base path

What is defined in patient.route.js is:

 patientrouter.post("/", Patientcreate); // ← Actual processing of POST /add/

This means the full accessible path is POST http://localhost:8080/add/ (note the trailing slash).

But your Angular PatientService is configured as:

 const baseUrl = 'http://localhost:8080/add'; // ← Missing trailing slash // Call this.http.post(baseUrl, data) → actually issue POST /add (without trailing slash)

Express's app.use('/add', router) will not automatically match /add (no trailing slash) by default - it only matches paths starting with /add/ (such as /add/, /add/foo). Therefore /add itself is treated as an independent route by Express, is undefined, and returns 404.

✅Repair plan one (recommended): Unify path specifications

• ✅ Backend: Ensure that the mount path is semantically consistent with the sub-route

   // server.js — modified to explicitly support /add and /add/
  app.use('/add', patientrouter);
  app.post('/add', (req, res) => { 
    patientrouter(req, res); // or redirect directly});

• ✅ Frontend: Explicitly add trailing slash in baseUrl

   const baseUrl = 'http://localhost:8080/add/'; // ← Key: add '/' at the end

? CORS is not the main reason, but it needs to be verified whether it really takes effect.

You have cors({ origin: "http://localhost:8080" }) enabled, but note:

• Angular runs at http://localhost:4200 (not 8080) by default, and your corurl.origin writes http://localhost:8080 → Origin does not match, CORS will be intercepted by the browser , and the error should be CORS policy: No 'Access-Control-Allow-Origin' header, not 404.
• ✅ The correct configuration should be:

   const corurl = { origin: "http://localhost:4200" }; // Angular default port // or more securely allow all development sources (development environments only):
  // const corurl = { origin: true };

? Tip: Open the browser developer tools → Network tab → click the failed request → View Headers → Request URL and Response → Status . If the status code is 404, it is 100% a routing problem; if the preflight request (OPTIONS) fails and a CORS error is reported, the origin needs to be corrected.

✅ Complete runnable repair steps

1. Update the CORS configuration of server.js :

    import cors from "cors";
   // ...
   const corurl = { origin: "http://localhost:4200", credentials: true };
   app.use(cors(corurl));

2. Correct baseUrl of patient.service.ts :

    const baseUrl = 'http://localhost:8080/add/'; // ← must have trailing slash

3. Enhance backend fault tolerance (optional but recommended) : Add a 404 log at the top of server.js to facilitate debugging:

    app.use('*', (req, res) => {
     console.log(`⚠️ Unmatched route: ${req.method} ${req.originalUrl}`);
     res.status(404).json({ error: 'Route not found' });
   });

4. Restart the service and verify :

   • Start the Node.js service (node ​​server.js or npm start)
   • Start Angular (ng serve)
   • Visit http://localhost:4200/add in the browser and submit the form
   • Check the browser Network panel: the request URL should be http://localhost:8080/add/, and the status code should be 200 or 201

⚠️ Notes and best practices

• Port consistency : Confirm that the Node.js service listening port (currently 8080) is exactly the same as the front-end request address; if process.env.PORT has been modified, please check it simultaneously.
• Production environment proxy : You can use Angular CLI's proxy.conf.json during the development phase to avoid cross-domain and hard-coded URLs:

   {
    "/add": {
      "target": "http://localhost:8080",
      "secure": false,
      "changeOrigin": true,
      "pathRewrite": { "^/add": "/add" }
    }
  }

  Then baseUrl = '/add/', forwarded by the Angular proxy.

• API versioning suggestion : In long-term projects, design the API path to /api/v1/patients instead of /add, which has clearer semantics and is easier to maintain.

Through the above adjustments, HttpErrorResponse: 404 will completely disappear, and the front-end and back-end data flows can be stably connected. Remember: 404 means that the server says "I did not find this address", not that the front end cannot send it out - first verify the URL, and then check the network and permissions.

The above is the detailed content of Guide to locating and resolving 404 errors in front-end and back-end integration between Angular and Node.js. For more information, please follow other related articles on the PHP Chinese website!