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

Posted 2023-03-28

【中文标题】ReactJS/Express Axios POST 返回 404，来自 Postman

【英文标题】：ReactJS/Express Axios POST returns 404, works from Postman

【发布时间】：2018-12-23 12:27:44

【问题描述】：

我不知道我在这里做错了什么。 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: "[e-mail]", password: "admin"
email
:
"[e-mail]"
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 到达端点没有问题。

【问题讨论】：

您的 express 后端在哪个端口上运行？

编辑了帖子。它是 process.env.PORT 或 5000

这个 React 应用是使用 create-react-app 创建的吗？

是的，我使用了create-react-app，然后设置并发运行服务器和客户端。它运行在：3000

【参考方案1】：

您的 React 应用运行在与后端应用不同的端口上。 create-react-app 在端口 3000 上运行，正如您所说，您的后端在端口 5000 上运行。

当您的客户端应用程序向服务器发出请求时，它实际上是向端口 3000 发出请求，如您在此处看到的。

请求网址：http://localhost:3000/api/users/login

这样做是因为您从未在请求​​中指定原始 url，如您在此处看到的 post("/api/users/login", userData)，在这种情况下，它默认为请求来自的同一端口，即端口 3000，而端口 3000 不在事实上有你要求的网址。

您可以通过在请求中包含原始 url 或在 react 应用程序 package.json 中添加代理来解决此问题。

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

【讨论】：

这两种方法都不起作用:(我在 axios.post 之前添加了localhost:3000，然后在 package.json "proxy": "localhost:5000" 中添加了。仍然得到 404。我说得对吗该设置需要在脚本中添加 ？实际上，每个选项都尝试了，但仍然没有成功。

好的，我不知道怎么做，但经过几次重新启动 package.json 指定的代理 5000 工作。非常感谢，伙计！我在这上面浪费了 6 个小时...