POST 400 错误请求 React 身份验证答案

【问题标题】：POST 400 bad request React authenticationPOST 400 错误请求 React 身份验证
【发布时间】：2021-01-07 15:12:25
【问题描述】：

知道是什么导致了这个错误吗？我正在尝试使用此 API https://app.swaggerhub.com/apis/warp/etn-device-checker-test/1.0#/default/post_login

验证登录

import React from 'react'
import axios from 'axios';
import { useState } from 'react';
function Login() {
  const [email, setEmail] = useState('');
  const [password, setPassword] = useState('');
  const onSubmit = (e) => {
    e.preventDefault();
    const getIn = {
      "login":email,
      "password":password,
    };
          
    axios
      .post('https://js-test-api.etnetera.cz/api/v1/login', getIn)
      .then((res) => {
        console.log(res.data);                 
      })
      .catch((error) => console.log(error));
  };
  return (
    <div>
      <form >
        <label>email</label>
        <input value={email} onChange={(e) => setEmail(e.target.value)} type="text"/>
        <label>password</label>
        <input type="text" value={password} onChange={(e) => setPassword(e.target.value)}/>
        <button onClick={onSubmit}>login</button>
      </form>
    </div>
  )
}
        
export default Login

【问题讨论】：

标签： reactjs axios

【解决方案1】：

如果您控制台输入对您有好处，因为 400 bad request 与输入和输出错误（错误的输入正文）有关。如果您能够控制台并且值正确打印为 json 对象，那么请联系后端人员，如果他们接受作为对象（输入中的 JSON 数据。试试这个示例：

axios.post('https://js-test-api.etnetera.cz/api/v1/login', getIn, {
        headers: {
            'Content-Type': 'application/json',
        }
    }).then((res) => {
        console.log(res.data);

    }).catch((error) => console.log(error));

输出：[Error: Request failed with status code 401]（表示它能够发送成功请求）

【讨论】：

【解决方案2】：

您需要在您的发布请求中添加标头。

axios.post(url, {
    //...data
}, {
    headers: {
       'content-type': 'application/json', 
   }
})

用邮递员试过了，效果很好。

【讨论】：