无法将 Axios 的 404 错误发布到 Create React App 上的 Express 服务器

Question

I'm using node/express on the backend and react on the frontend.

I'm testing a post request to 'http://localhost:8080/users/register' but on the client side I get a 404 error:

POST http://localhost:3000/ 404 (Not Found)

Postman post request (This works fine)

http://localhost:8080/users/register

I don't know why as I've set the proxy in my client side package.json file to point to my server port.

Package.json which includes proxy

      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "proxy": "http://localhost:8080"
    }

Axios POST request

import React from 'react';
import axios from 'axios';

function Register() {
    function onHandleRegisterSubmit() {
    axios.post('/users/register', {
    name: 'Joe',
    email: 'joe@msn.com'
  })
      .then((response) => {
        console.log(response);
      })
      .catch((error) => {
        console.log(error);
      });
    }

Answer 1

You don't have base URL "localhost:8000" while making the request, change request URL to localhost:8000/users/register

Explanation:

If you don't provide base URL then the request will be made to the base URL of the front end, that's why you're getting 404 and if you notice there is mentioned localhost:3000

A better way to do it: If you have multiple requests in your project then you should create an instance of axis and use that instance

Answer 2

This should not be a problem for anyone anymore. Kindly, on your backend, return a single response for both Postman and axios, then check if both responses are the same. Then have a close look at your logic inside the posted function: Have a look at the below example:

export const signin = async (req, res, next) => {

return res.status(200).json('Everthing is okay!')

// try {
//     const user = await User.findOne({ email: req.body.email })
//     if (!user) return next(createError(200, 'User not found.'))

//     const isCorrect = await bcrypt.compare(req.body.password, user.password)

//     if (!isCorrect) return next(createError(200, 'Wrong Credentials.'))

//     const token = jwt.sign({ id: user._id }, process.env.JWT)

//     const { password, ...others } = user._doc

//     res.cookie("access_token", token, {
//         httpOnly: true
//     }).status(200).json(others)

// } catch (err) {
//     // throw
//     next(err)
// }

}

if not then from your front-end make full url request not using proxy eg:

http://localhost:8800/api/auth/sign-in

as opposed to

/api/auth/sign-in

If these 2 fail, then you cloud be having a different issue on your front-end other than the backend.