如何用Axios正确发送含复选框数据的application/x-www-form-urlencoded POST请求？

核心问题修正 #

你当前代码的关键错误是Axios请求配置参数结构错误——axios.post的第三个参数必须是一个配置对象，headers需要嵌套在这个对象里，而非直接传入headers对象。

正确实现方案 #

以下两种方式均适配你的复选框+提交按钮场景，符合application/x-www-form-urlencoded格式要求：

方案1：使用URLSearchParams（推荐，自动处理编码）

无需手动拼接字符串，Axios会自动处理数据编码，且默认设置正确的请求头：

const URI = "https://www.guadeloupe.gouv.fr/booking/create/12828/0";
// 构造表单数据
const formData = new URLSearchParams();
formData.append("condition", "on"); // 复选框选中时的参数
formData.append("nextButton", "Effectuer une demande de rendez-vous"); // 提交按钮的参数

const config = {
  headers: {
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36',
    'Accept-Encoding': 'gzip, deflate, br',
    'Origin': 'https://www.guadeloupe.gouv.fr'
    // 使用URLSearchParams时，Content-Type可省略，Axios会自动设置
  }
};

const resp = await axios.post(URI, formData, config);

方案2：手动拼接表单字符串（需注意编码）

若坚持手动拼接，需确保特殊字符正确编码，同时修正Axios参数结构：

const URI = "https://www.guadeloupe.gouv.fr/booking/create/12828/0";
// 用+编码空格，或用encodeURIComponent处理参数值
const buttonText = encodeURIComponent("Effectuer une demande de rendez-vous");
const data = `condition=on&nextButton=${buttonText}`;

const config = {
  headers: {
    'Content-Type': 'application/x-www-form-urlencoded',
    'User-Agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36',
    'Accept-Encoding': 'gzip, deflate, br',
    'Origin': 'https://www.guadeloupe.gouv.fr'
  }
};

const resp = await axios.post(URI, data, config);

关键注意点 #

• 配置结构：Axios的POST请求第三个参数是config对象，所有请求配置（headers、timeout等）必须嵌套其中。
• 数据编码：手动拼接时，务必用encodeURIComponent处理参数值，避免特殊字符导致请求失败。
• Content-Type：使用URLSearchParams时Axios会自动设置正确的请求头；手动拼接则必须明确指定application/x-www-form-urlencoded。

内容的提问来源于stack exchange，提问作者steven de leon