前端传对象至后端，request.query获取值显示[object Object]求助

URL查询参数仅支持字符串类型，直接传递对象时，浏览器会调用对象的toString()方法，普通对象执行该方法会返回[object Object]，导致后端拿到的是这个字符串而非原对象。

方案一：通过JSON序列化传递（GET请求） #

前端处理 #

将对象序列化为JSON字符串后作为查询参数值发送：

// 方式1：手动构建URLSearchParams
const params = new URLSearchParams();
params.append('chartFilters', JSON.stringify(this.filters[key]));
// 发起请求，比如用fetch
fetch(`/your-api-path?${params}`);

// 方式2：使用axios等请求库
axios.get('/your-api-path', {
  params: {
    chartFilters: JSON.stringify(this.filters[key])
  }
});

后端处理 #

拿到JSON字符串后解析为对象：

export async function myFunction(
    request: Request,
    response: Response,
) {
    const chartFiltersStr = request.query?.chartFilters;
    if (typeof chartFiltersStr !== 'string') {
        return response.status(400).json({ error: 'chartFilters参数格式错误' });
    }
    
    try {
        const chartFilters = JSON.parse(chartFiltersStr);
        // 此时chartFilters就是原对象，可正常使用
        console.log(chartFilters);
        // 后续业务逻辑...
    } catch (err) {
        return response.status(400).json({ error: 'chartFilters参数解析失败' });
    }
}

方案二：使用POST请求传递复杂对象（更推荐） #

如果数据结构复杂，建议将对象放在请求体中发送，避免URL长度限制和序列化问题：

前端处理 #

// 用axios发送POST请求
axios.post('/your-api-path', {
  chartFilters: this.filters[key]
});

// 用fetch发送POST请求
fetch('/your-api-path', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ chartFilters: this.filters[key] }),
});

后端处理 #

直接从请求体中获取对象（需确保后端已配置解析JSON请求体的中间件，比如Express的express.json()）：

export async function myFunction(
    request: Request,
    response: Response,
) {
    const chartFilters = request.body?.chartFilters;
    if (!chartFilters) {
        return response.status(400).json({ error: '缺少chartFilters参数' });
    }
    // 直接使用chartFilters对象
    console.log(chartFilters);
    // 后续业务逻辑...
}

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