React fetch传参调用Node Express GET接口时服务端无法获取参数

React项目对接Node.js Express后端时，GET请求传参后端无法正常读取，相关代码如下：

• React端请求代码：

const loadOptions = async (cnt) => {
  const response = await fetch(`${baseurl}/pdt/prev=${prev}&cnt=${cnt}`);
  const resJSON = await response.json();
};

• Express端路由代码：

router.get("/pdt/:prev/:cnt", async (req, res) => {
try {
       console.log(req.params.cnt);
       console.log(req.params.prev);
      
      } catch (err) {
        res.json(err.message);
      }
    });

运行异常截图：

前后端URL传参格式完全不匹配：

• 后端定义的是路径参数路由，仅能匹配/pdt/[prev参数值]/[cnt参数值]格式的URL（两个参数用斜杠分隔，作为路径的一部分），这种格式下Express才会把对应位置的路径片段解析到req.params对象中。
• 前端拼接的URL用了查询字符串的key=value&key=value格式，还漏了查询串起始标识?，实际请求路径是/pdt/prev=xxx&cnt=xxx，Express只会把prev=xxx&cnt=xxx整个字符串识别为prev路径参数的值，根本匹配不到cnt的路径位，自然读不到正确参数。

两种方案选一种即可，禁止两种传参格式混用：

方案1：适配后端路径参数规则，修改前端URL拼接逻辑 #

保持后端路由不变，把前端URL改成斜杠分隔参数的路径格式：

const loadOptions = async (cnt) => {
  // 参数直接作为路径分段，用/分隔，不要加=、&符号
  const response = await fetch(`${baseurl}/pdt/${prev}/${cnt}`);
  const resJSON = await response.json();
};

修改后后端原有req.params.prev、req.params.cnt即可正常获取参数值。

方案2：适配前端查询串传参逻辑，修改后端路由 #

如果要保留key=value的传参格式，先修正前端URL（补全查询串起始的?），再修改后端路由从req.query读取参数：

1. 修正前端请求代码：

const loadOptions = async (cnt) => {
  // 查询串必须以?开头，多个参数用&连接
  const response = await fetch(`${baseurl}/pdt?prev=${prev}&cnt=${cnt}`);
  const resJSON = await response.json();
};

2. 修正后端路由代码：

// 路由不再声明路径参数
router.get("/pdt", async (req, res) => {
  try {
    // 从req.query读取查询串参数
    console.log(req.query.cnt);
    console.log(req.query.prev);
    // 原有业务逻辑
  } catch (err) {
    res.json(err.message);
  }
});

提示：如果参数包含中文、空格或特殊符号，直接拼接字符串会出现转义异常，查询参数建议用URLSearchParams做统一处理，路径参数建议提前用encodeURIComponent转义。

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