如何在React中携带参数发送POST请求？及相关报错排查

首先回答你的第一个问题：你提到的这种请求方式叫什么？ #

你给出的示例URL https://api.com/WebService.asmx/insertEvent?event_id=5&desc=<p>HelloWorld</p>&name=testing 其实是把POST请求的参数放到了URL查询字符串里——通常这种方式更多用在GET请求里，但有些老旧的ASMX WebService接口比较灵活，既支持通过URL传参，也支持传统的POST表单体传参。

然后解决你的POST请求报错问题 #

你的核心问题很明确：这个ASMX接口只认application/x-www-form-urlencoded格式的请求体（就是传统表单提交的那种键值对格式），但你之前的写法要么发了JSON，要么把参数放到了URL里，导致接口不识别，抛出错误。

方案1：用原生fetch发送符合要求的POST请求 #

把你的event对象转换成表单格式的请求体，而不是JSON：

const addBulletin = async (event) => {
  // 把event对象转成表单格式的键值对
  const formData = new URLSearchParams();
  Object.keys(event).forEach(key => {
    formData.append(key, event[key]);
  });

  try {
    const response = await fetch('https://api.com/WebService.asmx/insertEvent', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/x-www-form-urlencoded' // 这里必须指定正确的类型
      },
      body: formData
    });
    console.log('请求成功，状态码：', response.status);
  } catch (err) {
    console.warn('请求出错：', err);
  }
};

方案2：用axios发送表单格式的POST请求 #

axios默认会把数据序列化成JSON，所以我们需要手动转换成表单格式，有两种方式：

// 方式A：用原生URLSearchParams处理
const addBulletin = async (event) => {
  const formData = new URLSearchParams();
  Object.keys(event).forEach(key => {
    formData.append(key, event[key]);
  });

  axios.post('https://api.com/WebService.asmx/insertEvent', formData)
    .then(response => console.log('请求成功：', response.status))
    .catch(err => console.warn('请求出错：', err));
};

// 方式B：用qs库（更方便处理复杂对象，需要先安装：npm install qs）
import qs from 'qs';

const addBulletin = async (event) => {
  axios.post('https://api.com/WebService.asmx/insertEvent', qs.stringify(event), {
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded'
    }
  })
    .then(response => console.log('请求成功：', response.status))
    .catch(err => console.warn('请求出错：', err));
};

为什么你的jQuery ajax能正常工作？ #

因为jQuery的$.ajax在你传递data: json（这里的json其实是serialize()生成的表单格式字符串）时，会自动把请求头Content-Type设为application/x-www-form-urlencoded，正好匹配接口的要求，所以能成功。

你之前的axios写法问题出在哪？ #

你之前用params配置项，会把参数拼到URL的查询字符串里——虽然复制URL能工作，但这个ASMX接口的POST方法大概率期望参数在请求体里，再加上请求头没匹配，所以才会返回500错误。换成上面的表单格式请求体就没问题了。

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