為什么我的 axios 發布請求沒有發送數據？ 我收到了表示字段為空的響應

Question

我不知道為什么數據沒有發送到后端。

當我在 Insomnia 上測試 API 時，它運行良好。 I have even added new users to the database using the API but when I try to add new users from react using redux and axios, it doesn't go instead I get a response saying the fields can't be empty.

我試圖 console.log 我發送的所有數據，並且所有字段都正確填充。 我不知道我做錯了什么。

我使用 express-validator 來檢查輸入以及正常的錯誤處理，這就是為什么我得到響應為空的原因。

這是我在 redux 中發送數據的代碼

export const signin = data => dispatch => {

    const config = {
        method : "post",
        url : "http://localhost:5000/user/signin",
        headers : {
            "Content-Type":"application/json"
        },
        body : JSON.stringify(data)
    }

    console.log(config.body)

    axios(config)
    .then(res => dispatch({
        type : LOGIN_SUCCESS,
        payload : res.data
    }))
    .catch(err => {
        dispatch(error_msg(err.response.data, err.response.status))
        dispatch({
            type : LOGIN_FAIL
        })
    })
}

反應表單組件

import React, { useState } from 'react'
import { Link } from 'react-router-dom'
import AuthLayout from './AuthLayout'
import Layout from './Layout'
import {connect} from 'react-redux'
import {signin} from '../store/actions/authAction'
import axios from 'axios'

function SignIn({signin}) {

    const [value, setValue] = useState({
        email : '',
        password : ''
    })

    const handleChange = (e) => {
        setValue({
            ...value,
            [e.target.name] : e.target.value
        })
    }

    const handleSubmit = e => {
        e.preventDefault()

        const {email, password} = value

        const oldUser = {
            email,
            password
        }

        axios({method : "post",
        url : "http://localhost:5000/user/signin",
        headers : {
            "Content-Type":"application/json; charset=UTF-8",
            "Accept":"Token",
            "Access-Control-Allow-Orgin":"*",
        },
        body : JSON.stringify(oldUser)})
        .then(res => console.log(res.data))
        .catch(err => console.log(err.response.data))
        
    }

    return (
       <AuthLayout>
          <div className="form_container" style={bg}>
            <div className="form_title">
                <h2>Sign In</h2>
                
            </div>
            <form onSubmit={handleSubmit}>
                <div className="form_div">
                    <input type="text" placeholder="Enter Email" name="email" value={value.email} onChange={handleChange} />
                </div>
                <div className="form_div">
                    <input type="number" placeholder="Enter Password" name="password" value={value.password} onChange={handleChange} />
                </div>
                <div className="form_div form_btn">
                    <button>Submit</button>
                </div>
                <div className="form_div checkbox">
                    <input type="checkbox" />
                    <h4>Remember me</h4>
                </div>
            </form>
                <p>Don't have an account? <Link to="/signup"><span>Sign up</span></Link> </p>
                
          </div>
       </AuthLayout>
    )
}

const bg = {
    backgroundImage: 'url(image/Group1.svg)'
}

const mapStateToProps = state => {

    return{
        user : state.auth.user
    }
}



export default connect(mapStateToProps, {signin})(SignIn)

我沒有包括后端，因為它工作得很好。

Answer 1

這應該改為獲取，

axios.post('url', 'body', 'headers')

以上是Axios的實際結構應該使用。

試試上面的。

Answer 2

此處不需要 JSON.stringify

body : JSON.stringify(data),

利用

body: data,

因為數據本身是在 axious 中被字符串化的，如果你給它提供已經被字符串化的數據，你會有額外的轉義 json 不能被認為是有效的 json 作為后端服務器

Answer 3

感謝所有幫助我理解問題的人，我感謝您的所有努力。

我嘗試了這里提供給我的一些解決方案，但沒有奏效。

所以我后來做的是刪除 body 變量並用配置 object 中的數據替換它，它開始工作。

這是代碼：

export const signin = data => dispatch => {

    const config = {
        method : "post",
        url : "http://localhost:5000/user/signin",
        headers : {
            "Content-Type":"application/json",  
        },
        data : JSON.stringify(data)
    }

    console.log(config.data)

    axios(config)
    .then(res => dispatch({
        type : LOGIN_SUCCESS,
        payload : res.data
    }))
    .catch(err => {
        dispatch(error_msg(err.response.data, err.response.status))
        dispatch({
            type : LOGIN_FAIL
        })
    })
}

我不認為這是最好的解決方案，但在這種情況下，它對我有用。