React中Axios删除Banner报415 Unsupported Media Type错误

问题背景 #

• 已完成店铺Banner列表渲染，为每张Banner绑定了携带对应图片ID的删除按钮，点击按钮触发DELETE请求调用删除接口
• 同模块POST格式的Banner上传接口（使用FormData传参）可正常调用，仅删除接口持续返回415 Unsupported Media Type错误
• 原有核心实现代码：

const [del, setDel] = useState([]);

const DeleteBanner = async (banner) => {
    setDel(banner);
    console.log(del);
    Axios.delete(`/shop/${shopID}/banners`, del)
      .then((res) => {
        if (res.status === 200) {
          setMessage({
            data: `${res.data.MESSAGE}`,
            type: "alert-success",
          });
          onShowAlert();
        }
      })
      .catch((err) => {
        setMessage({
          data: err.response.data.MESSAGE,
          type: "alert-danger",
        });
        setLoading(false);
        onShowAlert();
      });
  };
return (
<div className="">
            {shopData.data.ShopBanner.map((banners) => (
              <Col
                md="6"
                xs="12"
                className="p-0 m-0"
                key={`img-${banners}`}
                href="#pimage"
              >
                <img
                  className="border border-white"
                  key={`img-${banners}`}
                  src={`/api/v2/public/Shop/${shopID}/banner/${encodeURIComponent(
                    banners
                  )}`}
                  style={{ padding: "5px" }}
                  width="100%"
                  height="100%"
                  alt="banner"
                />
                <Button
                  className="btn-link"
                  value={banners}
                  onClick={(e) => {
                    DeleteBanner(e.target.value);
                  }}
                >
                  Delete
                </Button>
              </Col>
            ))}
          </div>
)

错误根因 #

415 Unsupported Media Type的核心触发原因是服务端无法识别请求携带的Content-Type头，对应代码里的问题有两个：

1. Axios的delete方法传参格式错误：Axios.delete的第二个入参是请求配置对象，不是直接传请求体数据。当前代码直接把字符串类型的图片ID作为第二个参数传入，Axios不会自动组装正确的请求头，也不会把参数放到正确的位置，导致服务端无法识别请求格式。
2. 冗余的state逻辑存在隐患：React的state更新是异步的，代码中调用setDel(banner)后立刻读取del变量拿到的永远是旧值，且待删除的BannerID完全不需要存在组件state中，属于多余逻辑。

修复步骤 #

1. 先对照接口文档确认参数规则

先核对Swagger中删除接口的定义，明确两个信息：一是BannerID的传参位置（URL路径拼接、URL查询参数、请求体），二是接口要求的Content-Type值。

2. 按参数规则修正Axios调用写法
   • 若BannerID是路径参数（接口路径格式为/shop/{shopID}/banners/{bannerID}），直接拼接URL即可，示例代码：

   // 删除冗余的del相关state逻辑，直接使用入参的bannerID
   const DeleteBanner = async (bannerId) => {
     try {
       const res = await Axios.delete(`/shop/${shopID}/banners/${encodeURIComponent(bannerId)}`)
       if (res.status === 200) {
         setMessage({
           data: res.data.MESSAGE,
           type: "alert-success",
         });
         onShowAlert();
         // 删除成功后记得刷新Banner列表数据，同步页面展示
       }
     } catch (err) {
       setMessage({
         data: err.response.data.MESSAGE,
         type: "alert-danger",
       });
       setLoading(false);
       onShowAlert();
     }
   };
   

   • 若参数放在请求体、要求application/json格式，需将数据放到配置对象的data字段下，明确声明请求头：

   const res = await Axios.delete(`/shop/${shopID}/banners`, {
     headers: {
       'Content-Type': 'application/json'
     },
     data: {
       // 字段名与接口文档保持一致
       bannerId: bannerId
     }
   })
   

   • 若接口要求multipart/form-data格式（和上传接口要求一致），则传入FormData对象：

   const formData = new FormData()
   // 字段名与接口文档保持一致
   formData.append('bannerId', bannerId)
   const res = await Axios.delete(`/shop/${shopID}/banners`, {
     headers: {
       'Content-Type': 'multipart/form-data'
     },
     data: formData
   })
   

3. 清理冗余代码
   删除组件中无用的const [del, setDel] = useState([])声明，以及DeleteBanner方法里的setDel(banner)、console.log(del)逻辑，避免无效代码引发异常。

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