AXIOS React 前端的狀態 400 錯誤請求

Question

我正在 React 上構建一個身份驗證組件。 當輸入錯誤的密碼/用戶名時，我期待狀態 400 的消息：前端的“無效 email 或密碼”

相反，我收到帶有消息的狀態 400：“請求失敗，狀態代碼為 400”。 我使用 postman 來模擬錯誤登錄，但確實收到消息：“email 或密碼無效”

當我嘗試在我的前端成功登錄時，一切正常，我得到一個 JWT 令牌。

我還在后端做了一個console.log，可以看到數據確實到達了后端。 問題似乎是前端沒有正確處理錯誤。

有人可以看一下，讓我知道是什么問題嗎？ 謝謝你。

后端郵政路線

router.post('/signin', async (req, res) => {
    console.log(req.body)
    let user = await User.findOne({ email: req.body.email })
    if (!user) return res.status(400).send('Invalid email or password')
    //compare the password with the password in database 
    const validPassword = await bcrypt.compare(req.body.password, user.password)
    if (!validPassword) return res.status(400).send('Invalid email or password')
    const token = user.generateAuthToken()
    // res.send(token)
    res.header('x-auth-token', token).send(_.pick(user, ['_id', 'name)', 'email']))
})

前端反應

 doSubmit = async (e) => {
        e.preventDefault()
        const { data } = this.state

        try {
            console.log(data)
            await userService.signIn(data)
        } catch (ex) {
            console.log(ex.message)
            if (ex && ex.response.status === 400) {
                let errors = { ...this.state.errors }
                errors.email = ex.message
                this.setState({errors})
            }

        }
    }

用戶服務

import axios from 'axios'
import { SIGN_UP, SIGN_IN } from '../Components/constant/constant';
import { Redirect } from 'react-router-dom';


export default {

    register: (user) => {

        console.log(user, 'axios')
        axios.post(SIGN_UP, {
            email: user.email,
            password: user.password,
            name: user.name
        }).then(function (response) {
            console.log(response, 'response')
            console.log(response)
            if (response.status === 200) {
                window.location = '/signupsuccessful'
            }
        })
            .catch(function (error) {
                console.log(error);
            })
    },

    signIn: async (data) => {
        console.log('sign in user service')
        await axios.post(SIGN_IN, {
            email: data.email,
            password: data.password,
        })
    }
}

Answer 1

我想你只是錯過了 React 代碼的doSubmit function 中異常的response部分，所以你得到了異常消息而不是來自請求的響應消息。

改變

errors.email = ex.message

到

errors.email = ex.response.data

例子

if (ex && ex.response.status === 400) {
  let errors = { ...this.state.errors }
  errors.email = ex.response.data
  this.setState({errors})
}

Answer 2

您的代碼沒有任何錯誤，只是為了從 axios 中的錯誤案例中獲得響應，您必須這樣：

...
.catch((error)=>console.log(error.response.data))

編輯：更多細節所以你必須在你的代碼中做的是：

后端

不要發送字符串我建議發送 json

res.status(400).send({message:'Invalid email or password'})

前端

if (ex && ex.response.status === 400) {
    let errors = { ...this.state.errors }
    errors.email = ex.response.data.message
    this.setState({errors})
}