Axios传递数组参数触发ERR_BAD_OPTION_VALUE错误求助

错误根源 #

你触发的ERR_BAD_OPTION_VALUE，核心原因是Axios的GET请求params选项必须是对象类型——你可能直接把数组赋值给了params，或者将JSON.stringify处理后的值直接作为params传入，没有包裹在对象的属性中，导致Axios接收的参数不符合规范。

正确实现方式 #

假设你的接口需要将数组参数放在userIds这个键下，以下是两种合规的传参写法：

方式1：直接传递数组（Axios自动处理为URL查询参数）

import axios from 'axios';

// 正确：将数组挂载到params对象的属性上
axios.get('/api/contact-requests', {
  params: {
    // Axios默认会把数组转成 ?userIds=id1&userIds=id2 格式
    userIds: currentUser.contactRequestsTo
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

方式2：手动转JSON字符串传递（适配后端需JSON格式参数的场景）

import axios from 'axios';

// 正确：把JSON字符串作为对象属性的值传递
axios.get('/api/contact-requests', {
  params: {
    // 数组转JSON字符串，后端需解析该字符串还原数组
    userIds: JSON.stringify(currentUser.contactRequestsTo)
  }
})
.then(response => {
  console.log(response.data);
})
.catch(error => {
  console.error(error);
});

你可能踩的错误写法对比 #

// ❌ 错误：直接把数组赋值给params，不符合对象类型要求
axios.get('/api/contact-requests', currentUser.contactRequestsTo);

// ❌ 错误：params直接传入JSON字符串，而非包含该字符串的对象
axios.get('/api/contact-requests', {
  params: JSON.stringify(currentUser.contactRequestsTo)
});

额外配置（适配后端特殊参数格式） #

如果后端要求数组参数格式为userIds[]=id1&userIds[]=id2，可以配置Axios的paramsSerializer：

axios.get('/api/contact-requests', {
  params: {
    userIds: currentUser.contactRequestsTo
  },
  paramsSerializer: {
    serialize: (params) => new URLSearchParams(params).toString()
    // 若用qs库可更灵活：return qs.stringify(params, { arrayFormat: 'brackets' })
  }
});

内容的提问来源于stack exchange，提问作者j-terranova