ReactJS / Express Axios POST返回404，來自Postman

Question

我不知道我在做什么錯。 POST方法可從Postman使用，但不適用於React前端。

users.js（/ api / users / login）

// @route   POST api/users/login
// @desc    Login user / Returning JWT Token
// @access  Public
router.post('/login', (req, res, next) => {
  const { errors, isValid } = validateLoginInput(req.body);

  // Check validation
  if (!isValid) {
    return res.status(400).json(errors);
  }

  const email = req.body.email;
  const password = req.body.password;

  // Find user by email
  User.findOne({ email }) // matching email: email
    .then(user => {
      if (!user) {
        errors.email = 'User not found';
        return res.status(404).json(errors);
      }

    // Check Password
    bcrypt.compare(password, user.password)
      .then(isMatch => {
        if(isMatch) {

          // User matched. Create JWT payload
          const payload = {
            id: user.id
          } 

          // Sign Token
          jwt.sign(
            payload,
            keys.secretOrKey, 
            { expiresIn: 3600 }, 
            (err, token) => {
              res.json({
                success: true,
                token: 'Bearer ' + token
              });
          });
        } else {
          errors.password = 'Password incorrect'
          return res.status(400).json(errors);
        }
    });
  }); 
});

loginUser（）函數：

export const loginUser = userData => dispatch => {
  axios
    .post("/api/users/login", userData)
    .then(res => {
      // Save to localStorage
      const { token } = res.data;
      // Set token to localStorage
      localStorage.setItem("jwtToken", token); // only stores strings
      // Set token to Auth header
      setAuthToken(token);
      // Decode token to get user data
      const decoded = jwt_decode(token);
      // Set current user
      dispatch(setCurrentUser(decoded));
    })
    .catch(err =>
      dispatch({
        type: GET_ERRORS,
        payload: err.response.data
      })
    );
};

React組件中的onSubmit（）函數：

  onSubmit(e) {
    e.preventDefault();

    const userData = {
      email: this.state.email,
      password: this.state.password
    }

    this.props.loginUser(userData);
  }

網絡：

Request URL: http://localhost:3000/api/users/login
Request Method: POST
Status Code: 404 Not Found
Remote Address: 127.0.0.1:3000
Referrer Policy: no-referrer-when-downgrade
Connection: keep-alive
Content-Length: 155
Content-Security-Policy: default-src 'self'
Content-Type: text/html; charset=utf-8
Date: Mon, 16 Jul 2018 01:53:03 GMT
Vary: Accept-Encoding
X-Content-Type-Options: nosniff
X-Powered-By: Express
Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: en-US,en;q=0.9
Connection: keep-alive
Content-Length: 46
Content-Type: application/json;charset=UTF-8
Cookie: io=VtWk-hb742jVakwrAAAE; PHPSESSID=ige5g7257th8hiksjomg2khouu; i18next=en; connect.sid=s%3Aq6FkEveJbDYoKTy386QESFBxGaW8MjKd.qSBAkm2t23Ww4ZtHtcs7%2F1e5tDn528i0C6Hv7U3PwI0
Host: localhost:3000
Origin: http://localhost:3000
Referer: http://localhost:3000/login
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/67.0.3396.99 Safari/537.36
{email: "admin@gmail.com", password: "admin"}
email
:
"admin@gmail.com"
password
:
"admin"

server.js上的端口：

// Initializint the port
const port = process.env.PORT || 5000;

app.listen(port, () => console.log(`Server running on port ${port}`));

我在這里檢查了一些類似的問題，其中大多數與標題有關。 就我而言，標頭是application / json，所以我認為問題不存在。 通過Postman到達端點沒有問題。

Answer 1

您的React應用程序與后端應用程序在不同的端口上運行。 create-react-app運行在端口3000上，正如您所說的，后端運行在端口5000上。

當您的客戶端應用向服務器發出請求時，實際上是向端口3000發出請求，如您在此處看到的。

要求網址： http：// localhost：3000 / api / users / login

這樣做是因為您從未在請求​​中指定原始網址，因為您可以在此處看到post("/api/users/login", userData) ，在這種情況下，它默認使用與請求來自的端口相同的端口3000 ，而端口3000實際上沒有您請求的網址。

您可以通過在請求中包括原始URL或在此處將代理添加到react app package.json來解決此問題。

https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#proxying-api-requests-in-development