React项目中axios post请求报415错误如何解决

React项目中使用axios的post方法向后端接口发送数据时，持续收到415错误响应；尝试将请求头Content-Type字段修改为application/x-www-form-urlencoded后问题仍然存在。同项目下使用axios.get发起数据获取请求可正常运行，无报错。

相关代码 #

API端点配置文件 #

import axios from "axios";

const api = () => {
  const baseUrl = "https://localhost:5001/api";
  let optionAxios = {
    headers: {
      "Content-Type": "text/plain;charset=utf-8",
    },
  };

  return {
    getSubjects: () => axios.get(`${baseUrl}/subjectcontroller/getsubjects`),
    addSubject: (subjectName) =>
      axios.post(
        `${baseUrl}/subjectcontroller/createsubject`,
        {
          name: subjectName,
        },
        optionAxios
      ),
  };
};

export const apiService = api();

数据提交React组件 #

import Context from "../../store/context";
import FormContainer from "../UI/FormContainer";
import { apiService } from "../../services/api/api.service";
import { useContext, useRef } from "react";

const AddSubject = () => {
  const ctx = useContext(Context);
  const subject = useRef("");

  const sendData = (e) => {
    e.preventDefault();

    apiService.addSubject(subject.current.value);
  };

  return (
    <FormContainer show={ctx.subjectForm} send={sendData}>
      <label htmlFor="subject">Subject Name: </label>
      <input type="text" id="subject" ref={subject} />
      <button type="submit">Add</button>
    </FormContainer>
  );
};

415错误的含义是不支持的媒体类型，即后端无法解析请求携带的请求体格式，代码存在两个核心问题：

• 配置中写死了Content-Type: text/plain;charset=utf-8，相当于告诉后端发送的是纯文本内容，但实际传给axios.post的是JS对象，和声明的内容类型不匹配。
• 之前尝试修改为application/x-www-form-urlencoded时，只改了请求头，没有将JS对象转换为对应格式的请求体字符串，后端依然无法解析。
  get请求不携带请求体，不会触发这个类型校验问题，因此可以正常运行。

根据后端接口要求的请求体格式二选一即可：

方案1：后端接收JSON格式（绝大多数后端框架默认配置） #

直接删除配置中错误写死的Content-Type即可，axios在post方法接收到普通JS对象作为参数时，会自动将请求头设置为application/json，同时自动将对象序列化为JSON字符串发送，完全符合后端要求。
修正后的API配置代码：

import axios from "axios";

const api = () => {
  const baseUrl = "https://localhost:5001/api";

  return {
    getSubjects: () => axios.get(`${baseUrl}/subjectcontroller/getsubjects`),
    addSubject: (subjectName) =>
      axios.post(
        `${baseUrl}/subjectcontroller/createsubject`,
        {
          name: subjectName,
        }
      ),
  };
};

export const apiService = api();

方案2：后端要求接收x-www-form-urlencoded格式 #

除了修改Content-Type，还需要将传入的JS对象转换为urlencoded格式的字符串，使用原生URLSearchParams处理即可：

import axios from "axios";

const api = () => {
  const baseUrl = "https://localhost:5001/api";
  let optionAxios = {
    headers: {
      "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
    },
  };

  return {
    getSubjects: () => axios.get(`${baseUrl}/subjectcontroller/getsubjects`),
    addSubject: (subjectName) => {
      const formData = new URLSearchParams();
      formData.append('name', subjectName);
      return axios.post(
        `${baseUrl}/subjectcontroller/createsubject`,
        formData,
        optionAxios
      )
    },
  };
};

export const apiService = api();

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