NodeJS API 在浏览器上显示错误 404 但使用 Postman 运行

Question

I am working with simple user signup and login with NodeJs and MongoDb. for GET and POST request, I am using Express Router as coded in user.js:

// Filename : user.js

const express = require("express");
const { check, validationResult} = require("express-validator");
const bcrypt = require("bcryptjs");
const jwt = require("jsonwebtoken");
const router = express.Router();
const auth = require("../middleware/auth");
const User = require("../model/User");

/**
 * @method - POST
 * @param - /signup
 * @description - User SignUp
 */

router.post(`/signup`, //dipanggil untuk testing menggunakan cors pada single route
  [
    check("username", "Please Enter a Valid Username")
    .not()
    .isEmpty(),
    check("email", "Please enter a valid email").isEmail(),
    check("password", "Please enter a valid password").isLength({min: 6})
  ],
    async (req, res) => {
      const errors = validationResult(req);
        if (!errors.isEmpty()) {
          return res.status(400).json({
            errors: errors.array()
          });
        }

      const {
        username,
        email,
        password
      } = req.body;
        try {
          let user = await User.findOne({ email });
          if (user) {
            return res.status(400).json({ msg: "User Already Exists" });
          }

          user = new User({
            username,
            email,
            password
          });

          const salt = await bcrypt.genSalt(10);
          user.password = await bcrypt.hash(password, salt);

          await user.save();
          const payload = {
            user: {
              id: user.id
            }
          };

          jwt.sign( payload, "randomString", { expiresIn: 10000 }, (err, token) => {
                  if (err) throw err;
                  res.status(200).json({token});
          });
          } catch (err) {
            console.log(err.message);
            res.status(500).send("Error in Saving");
          }
  }
);

/**
 * @method - POST
 * @description - User Login
 * @param - /user/login
 */

router.post("/login",
  [
    check("email", "Please enter a valid email").isEmail(),
    check("password", "Please enter a valid password").isLength({
      min: 6
    })
  ],
  async (req, res) => {
    const errors = validationResult(req);

    if (!errors.isEmpty()) {
      return res.status(400).json({
        errors: errors.array()
      });
    }

    const { email, password } = req.body;
    try {
      let user = await User.findOne({
        email
      });
      if (!user)
        return res.status(400).json({
          message: "User Not Exist"
        });

      const isMatch = await bcrypt.compare(password, user.password);
      if (!isMatch)
        return res.status(400).json({
          message: "Incorrect Password !"
        });

      const payload = {
        user: {
          id: user.id
        }
      };

      jwt.sign(
        payload,
        "randomString",
        {
          expiresIn: 3600
        },
        (err, token) => {
          if (err) throw err;
          res.status(200).json({
            token
          });
        }
      );
    } catch (e) {
      console.error(e);
      res.status(500).json({
        message: "Server Error"
      });
    }
  }
);

module.exports = router;

then I call user.js in index.js as coded:

const express = require("express");
const bodyParser = require("body-parser");
const InitiateMongoServer = require("./config/db");
const validationResult  = require("express-validator");
const user = require("./routes/user");

const PORT = process.env.PORT || 4000;
const app = express();

// Initiate Mongo Server
InitiateMongoServer();

//cors
const cors = require ('cors');
app.use(cors({ origin: true, credentials: true }));

// Middleware
app.use(bodyParser.urlencoded({ extended: false }));
app.use(bodyParser.json());

/**
 * Router Middleware
 * Router - /user/*
 * Method - *
 */
app.use("/user", user);

app.get("/", (req, res) => {
  res.json({ message: "API Working" });
});


app.listen(PORT, (req, res) => {
  console.log(`Server Started at PORT ${PORT}`);
});

This result i got from postman:

and in the Browser, I got this:

As I mentioned, this code working when I tested on Postman, but keep display error when I tried to access the url in the browser. some recommendations I read that asked me to use CORS to solve the problem but after I tried, it's not working. I also add additional cors plugin in the browser (in this case, I tried using Mozilla and Chrome).

I got stuck with this in two days. Hopefully, there is any kind of help for me

Answer 1

This is because when accessing a URL in a browser, it is using a GET request. Since you haven't defined a GET endpoint in your API with that URL, it is returning a 404.

You can only access POST or other endpoints in browser using XHR or fetch requests.

Answer 2

All the routes mentioned in your code are POST which cannot be triggered from a browser URL. You can invoke a GET method using a browser and if you need to pass in arguments you can use querystring or params.

Answer 3

you must add get method for default

such

 router.get('/',function (){})