POST 400 錯誤請求 React 身份驗證

Question

知道可能導致該錯誤的原因是什么嗎？ 我正在嘗試使用此 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

Answer 1

如果您控制台輸入對您有好處，因為 400 bad request 與輸入和輸出錯誤（錯誤的輸入正文）有關。 如果您能夠控制台並且值正確打印為 json object，那么請聯系后端人員，如果他們接受為 object（輸入中的 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));

output:[Error: Request failed with status code 401]（表示可以發送成功請求）

Answer 2

您需要將標頭添加到您的發布請求中。

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

嘗試使用 postman 並且它有效。