我无法正确发送正文答案

【问题标题】：I cant send correctly the body我无法正确发送正文
【发布时间】：2021-08-07 07:25:02
【问题描述】：

我正在使用一个应用程序 (nodeJS)，它需要在请求正文中捕获电子邮件和密码才能删除令牌。我在前端使用 react 来使用 fetch 发布帖子，但是当我使用 onClick 事件发布帖子时，我观察 API 的控制台，正文没有正确形成。

{ '{"email":"johndoe@gmail.com","password":"Johnismyname"}':'' }

问题不在于 API，因为我使用邮递员对其进行了测试并且工作正常。我猜问题出在反应代码中，因为我还在学习。这是反应中的代码：

    import { Link } from "react-router-dom"
    import { useRef, useState } from 'react';
    export default function Login() {
    const [token, setToken] = useState('') 
    const LOGIN_API_URL = "http://localhost:3010/api/v1/users/login"
    const GET_USER_API_URL = "http://localhost:3010/api/v1/users/getuser"
    const userEmail = useRef();
    const userPassword = useRef();
    async function apiCall(email, password, tokenUrl, userUrl) {
        const body = JSON.stringify({
            email: email,
            password: password
        });
        const fetchConfig = {
            method: "POST",
            headers: {
                "Accept": "application/json",
                "Content-Type": "application/x-www-form-urlencoded"
            },
            body
        }
        const response = await fetch(tokenUrl, fetchConfig)
        const data = await response.json()
        console.log(data);
        return setToken(data.token)
    }
    return (
        <div className="login-container">
            <div className="inputs-container">
                <h1>Login</h1>
                <input ref={userEmail} type="email" name="email" id="email" placeholder="email"/>
                <input ref={userPassword }type="password" name="password" id="password" placeholder="password" />
                <div
                    className="button-submit"
                    onClick={() => {
                        apiCall(userEmail.current.value, userPassword.current.value, LOGIN_API_URL, GET_USER_API_URL)
                    }}
                >
                    Join
                </div>
            </div>
            <h3><Link className="register hover-expands" to="/register">Register</Link></h3>
        </div>
    )
}

【问题讨论】：

标签： node.js reactjs fetch fetch-api

【解决方案1】：

这是由于您在标题中提供的 Content-Type 不正确。将application/x-www-form-urlencoded 替换为application/json 以获得所需的结果。

const fetchConfig = {
  method: "POST",
  headers: {
    "Accept": "application/json",
    "Content-Type": "application/json",
  },
  body,
};

【讨论】：

我尝试使用此配置，但正文到达时是空的
你的意思是你在你的 node.js 应用程序中得到 req.body = {} ？
是的，如果我console.log("BODY =>", req.body) 我得到REQ.BODY => {} (node:18308) UnhandledPromiseRejectionWarning: Error: WHERE parameter "email" has invalid "undefined" value
但是，如果我在 the apiCall() 中做出一个 console.log(fetchConfig.body) 的反应，我会得到一个正确的 JSON：{"email":"johndoe@gmail.com","password":"Johnismyname"}
能否也提供后端代码？

【解决方案2】：

将这行代码"Content-Type": "application/x-www-form-urlencoded"改为"Content-Type": "application/json"

【讨论】：

我尝试使用此内容/类型，但正文到达时为空