如何让Axios请求参数自动转为对象？React+Express场景问题

你遇到的这个情况，本质是Axios默认的GET参数序列化方式和Express默认的URL查询参数解析方式不匹配导致的：

• Axios在处理GET请求的params时，默认用URLSearchParams来序列化参数。对于嵌套对象（比如你products数组里的每个元素），URLSearchParams会直接调用JSON.stringify把对象转成字符串，所以后端收到的就是带转义引号的JSON字符串。
• Express默认解析req.query时，只会处理简单的键值对，不会自动识别并解析嵌套的JSON字符串，所以你看到数组里的元素变成了字符串格式。

推荐两种方法，第一种更通用，不用在后端逐个处理参数：

方法1：前端用qs库序列化参数，后端配合解析 #

这个方法能让嵌套对象自动被正确序列化和解析，不用手动转JSON：

步骤1：安装qs库 #

在React项目里安装：

npm install qs
# 或者用yarn
yarn add qs

步骤2：修改Axios请求的paramsSerializer配置 #

把Axios的参数序列化换成qs，它支持嵌套对象的正确序列化：

import qs from 'qs';

axios
 .get(`/shipping/get-shipping-values`, {
  params: {
   products: [
    { ...product, quantity },
   ],
   postalCode,
   cartTotalPrice: getProductPriceNumber(product.price) * quantity,
  },
  // 配置用qs序列化参数，支持嵌套对象
  paramsSerializer: (params) => qs.stringify(params, { allowDots: true })
 })
 .then((response) => { /* 处理响应 */ })
 .catch((error) => { console.log(error); });

步骤3：确保Express启用extended: true的URL解析 #

在你的Express项目里，确保已经配置了express.urlencoded并且开启extended: true（这会让Express用qs库解析查询参数，和前端的序列化对应）：

const express = require('express');
const app = express();

// 开启这个配置，让Express能解析嵌套的查询参数
app.use(express.urlencoded({ extended: true }));

做完这几步，后端打印req.query.products就能直接拿到对象数组，不用再手动JSON.parse了。

方法2：后端写中间件自动解析嵌套JSON字符串 #

如果不想改动前端代码，可以在Express里写一个全局中间件，自动识别并解析查询参数里的JSON字符串：

app.use((req, res, next) => {
  // 针对products数组处理，你也可以扩展成通用逻辑
  if (req.query.products && Array.isArray(req.query.products)) {
    req.query.products = req.query.products.map(item => {
      try {
        // 尝试解析成JSON，失败则保持原内容
        return JSON.parse(item);
      } catch (err) {
        return item;
      }
    });
  }
  next();
});

这个方法适合只需要处理特定参数的场景，但通用性不如第一种。

推荐用第一种方法，前后端用qs统一序列化/解析规则，能一劳永逸解决嵌套对象的参数传递问题，不用再手动处理JSON.parse。

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