React中Axios发JSON请求遇422错误，API期望FormData格式求解决

你的问题出在没有正确使用FormData填充字段，且依然在发送JSON格式的请求体。以下是正确的实现方式：

方式一：使用FormData（适用于multipart/form-data格式） #

直接创建FormData实例并通过append方法添加字段，然后将FormData作为请求体传给axios：

const login = async (username, password) => {
  const formData = new FormData();
  // 向FormData中添加登录字段
  formData.append('username', username);
  formData.append('password', password);

  const response = await axios.post('/auth/jwt/login', formData);
  const { accessToken, user } = response.data;

  setSession(accessToken);

  dispatch({
    type: 'LOGIN',
    payload: { user },
  });
};

axios会自动为FormData请求设置Content-Type: multipart/form-data请求头，匹配API对表单数据的要求。

方式二：使用URLSearchParams（适用于application/x-www-form-urlencoded格式） #

如果你的API期望的是application/x-www-form-urlencoded格式（常见于传统表单提交），可以用URLSearchParams来处理：

const login = async (username, password) => {
  const params = new URLSearchParams();
  params.append('username', username);
  params.append('password', password);

  const response = await axios.post('/auth/jwt/login', params);
  const { accessToken, user } = response.data;

  setSession(accessToken);

  dispatch({
    type: 'LOGIN',
    payload: { user },
  });
};

方式三：使用qs库序列化（可选） #

如果需要更复杂的参数序列化，也可以用qs库（需先安装：npm install qs）：

import qs from 'qs';

const login = async (username, password) => {
  const requestData = qs.stringify({ username, password });
  
  const response = await axios.post('/auth/jwt/login', requestData, {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
  });
  
  const { accessToken, user } = response.data;
  setSession(accessToken);
  
  dispatch({
    type: 'LOGIN',
    payload: { user },
  });
};

内容的提问来源于stack exchange，提问作者Felipe