My POST request is returning a 404 not found but my GET request on the same route works-CodePudding

I'm currently following along https://youtu.be/Ud5xKCYQTjM but in TypeScript, my GET request works

GET http://localhost:48080/users

HTTP/1.1 200 OK
X-Powered-By: Express
Content-Type: application/json; charset=utf-8
Content-Length: 2
ETag: W/"2-l9Fw4VUO7kr8CvBlt4zaMCqXZ0w"
Date: Thu, 28 Jul 2022 13:14:52 GMT
Connection: close

[]

while my POST request fails

POST http://localhost:48080/users Content-Type: application/json

{
"name": "Kyle", "password": "password"
}

HTTP/1.1 404 Not Found
X-Powered-By: Express
Vary: Origin
Access-Control-Allow-Credentials: true
Content-Security-Policy: default-src 'none'
X-Content-Type-Options: nosniff
Content-Type: text/html; charset=utf-8
Content-Length: 180
Date: Thu, 28 Jul 2022 13:15:09 GMT
Connection: close

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Error</title>
</head>
<body>
<pre>Cannot POST /users Content-Type: application/json</pre>
</body>
</html>

I am unsure why it returns a 404 not found when the route exists? I've tried removing 'async' in my server.ts file in regards to the post request, as at the start of the guide, he did not use 'async' but it did not work. Could CORS be an issue? but I'm sending requests within the same origin.

server.ts

import express from "express";
import cors from "cors";
import { Request } from "express-serve-static-core";
import { ParsedQs } from "qs";
// const bcrypt = require('bcrypt')

/* Set up server app */
const app = express();
// const port: number =  (process.env.PORT || 48080);
const port: number = 48080;

const users: { name: string; password: string; }[] = []

app.get('/users', (req, res) => {
  res.json(users)
})

app.post('/users', async (req, res) => {
  try {
    const user = { name: req.body.name, password: req.body.password }
    users.push(user)
    res.status(201).send()
  } catch {
    res.status(500).send()
  }
})

app.post('/users/login', async (req, res) => {
  const user = users.find(user => user.name === req.body.name)
  if (user == null) {
    return res.status(400).send('Cannot find user')
  }
  try {
    if(userAuthenticate(req, user)) {
      res.send('Success')
    } else {
      res.send('Not Allowed')
    }
  } catch {
    res.status(500).send()
  }
})

/* Listen for incoming connections */
app.listen(port, () => {
    console.log(`API listening on port ${port}.`);
});

/* Enable CORS */
app.use(cors({
    origin: ["http://localhost:3000", "http://localhost:48080"],
    credentials: true,
    optionsSuccessStatus: 200
}));

function userAuthenticate(req: Request<{}, any, any, ParsedQs, Record<string, any>>, user: { name: string; password: string; }) {
    return req.body.password == user.password;
}

CodePudding user response：

Look at the error message:

Cannot POST /users Content-Type: application/json

Now look at your command line:

POST http://localhost:48080/users Content-Type: application/json

The tool you are using to make the HTTP request is treating Content-Type: application/json as part of the path and not as a request header.

You need to read the documentation for your POST command line tool and figure out how to make it an HTTP header.