前端接口请求中，GET 和 POST 对于传参的string/number区别

最近和后端同事联调接口时，遇到一个哭笑不得的问题：我在 POST 请求的 JSON 里传了数字类型的id: 123，后端却反馈 "接收的是字符串 '123'，转数字报错了"。追问之下才发现，他居然不知道 "参数类型不是由 GET/POST 决定的"------ 这事儿让我意识到，很多新手（甚至老鸟）都对 "前端参数类型传递" 存在误解。

今天就彻底讲清楚：前端接口请求中，参数到底是 number 还是 string？GET 和 POST 的区别在哪里？怎么避免联调时的 "类型扯皮"？

一、先破个误区：不是 GET/POST 决定类型，是 "传递位置" 决定的

很多人以为 "GET 只能传 string，POST 能传 number"，或者反过来 ------ 这其实是错的。参数的最终类型，核心取决于 "参数放在哪里传递"，而不是用 GET 还是 POST 方法。

前端参数传递主要有两个位置：

URL 查询参数 （比如/list?id=123里的id）：不管用 GET 还是 POST，只要参数放这里，最终都是 string；
请求体（Body） （比如 POST 请求里的 JSON 数据）：类型由请求体格式决定，JSON 能传 number，表单格式会转 string。

先记住这个核心结论，再往下看具体场景。

二、场景 1：GET 请求的参数 ------ 不管传啥，最后都是 string

GET 请求的参数只能放在 URL 的查询串里（比如https://api.com/user?id=123&page=2），而 URL 的本质是 "字符串"------ 所以不管你前端传的是数字 123，还是布尔值 true，最后都会被自动转成字符串。

举个实际例子，用 Axios 发 GET 请求：

javascript

csharp 复制代码

// 前端代码：params里的id是number类型，page也是number
axios.get('/api/user', {
  params: {
    id: 123,    // 我传的是number
    page: 2,    // 我传的还是number
    isVip: true // 布尔值也一样
  }
})

你以为后端收到的是id=123（number）？其实 URL 最终会变成这样：

plaintext

bash 复制代码

/api/user?id=123&page=2&isVip=true

这里的123、2、true，全都是字符串 ------ 因为 URL 只能是字符串，没办法直接承载 number 或布尔值。

那后端怎么拿 number？得自己转。比如 Node.js/Express 里：

javascript

javascript 复制代码

// 后端代码：req.query.id是string，需要手动转number
const id = Number(req.query.id); 
if (isNaN(id)) {
  return res.send('id必须是数字');
}

如果后端是 Java/Spring，会方便点，用@RequestParam Integer id能自动转，但本质还是 "先接 string，再转 number"------ 因为 URL 里过来的本来就是 string。

三、场景 2：POST 请求的参数 ------ 看 "请求体格式"，JSON 能传真 number

POST 请求的参数放在 "请求体（Body）" 里，而请求体的格式由Content-Type决定，不同格式对 "类型保留" 的能力完全不同。这也是新手最容易踩坑的地方。

1. 推荐用 JSON 格式（Content-Type: application/json）：能传真 number

JSON 格式本身就支持 number、string、boolean、数组、对象等类型 ------ 所以你在前端传什么类型，只要后端正确解析，就能拿到什么类型。

比如我要传一个用户信息，用 JSON 格式：

javascript

php 复制代码

// 前端代码：JSON格式的请求体，id是number，age是number
axios.post('/api/user/save', {
  id: 123,        // number类型
  name: '张三',    // string类型
  age: 25,        // number类型
  isVip: true     // boolean类型
})
// 注意：Axios默认Content-Type就是application/json，不用手动加

这时请求体的原始数据是这样的（没经过任何类型转换）：

json

json 复制代码

{"id":123,"name":"张三","age":25,"isVip":true}

后端只要配置了 JSON 解析器，就能直接拿到 number 类型。比如 Node.js 用express.json()中间件：

javascript

javascript 复制代码

// 后端代码：直接拿到number类型的id
app.use(express.json()); // 关键：解析JSON请求体
app.post('/api/user/save', (req, res) => {
  console.log(typeof req.body.id); // 输出：number
  console.log(typeof req.body.name); // 输出：string
  // 不用手动转类型，直接用就行
});

Java/Spring 更简单，用@RequestBody注解配合实体类：

java

less 复制代码

// 后端代码：实体类里id是Integer类型，自动匹配
@PostMapping("/api/user/save")
public void saveUser(@RequestBody User user) {
  Integer id = user.getId(); // 直接是Integer类型，不用转
}

// 实体类
class User {
  private Integer id;
  private String name;
  // getter/setter
}

这种情况，前端传 number，后端接 number------ 完全没问题。

2. 踩坑点：用表单格式（x-www-form-urlencoded）会转 string

如果 POST 请求用了application/x-www-form-urlencoded格式（也就是传统表单提交的格式），那不管你传什么类型，最后都会变成 string------ 和 GET 的 URL 参数一样。

比如前端用 Axios 发表单格式的 POST 请求：

javascript

php 复制代码

// 前端代码：用qs.stringify把对象转成表单字符串
import qs from 'qs';

axios.post('/api/user/save',
  qs.stringify({ id: 123, age: 25 }), // 这里number会被转成string
  { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }
)

这时请求体的原始数据是这样的（和 URL 查询串一样）：

plaintext

ini 复制代码

id=123&age=25

后端接收到的id和age都是 string 类型。如果后端没手动转 number，直接用id + 1，就会变成"123"+1="1231"------ 这就是我开头遇到的坑。

3. 特殊情况：传文件用 multipart/form-data

如果要传文件（比如图片、Excel），会用multipart/form-data格式。这种情况下，普通参数（如 id、name）会转成 string，文件参数是二进制流。

前端代码示例：

javascript

go 复制代码

const formData = new FormData();
formData.append('id', 123); // number转string
formData.append('avatar', fileObj); // 文件是二进制

axios.post('/api/user/upload', formData);

后端接id时，同样需要手动转 number。

四、为什么会出现 "后端不知道传的是啥类型"？

联调时的 "类型扯皮"，大多不是技术问题，而是 "约定问题"：

后端没说清楚要什么格式：比如他要 JSON 格式的 number，却没在接口文档里写，反而默认按表单格式解析；
前端没问清楚传递方式：比如想当然用了表单格式，却不知道后端期望 JSON；
双方都不懂 "传递位置决定类型" ：比如后端以为 "POST 一定是 string"，前端以为 "传 number 后端就能接 number"。

五、避免踩坑的 3 个最佳实践

优先用 JSON 格式传 POST 参数JSON 能保留 number、boolean 等原始类型，不用手动转换，是前后端协作的 "最优解"。除非后端明确要求用表单格式（比如老系统兼容），否则别用 x-www-form-urlencoded。
**接口文档里写清楚 "类型 + 格式"**好的接口文档应该明确：
- 参数传递位置（URL 查询参数 / 请求体）；
- 请求体格式（application/json）；
- 每个参数的类型（比如 id: number，name: string）。
举个文档示例：

plaintext
typescript 复制代码
```
接口：/api/user/save
方法：POST
Content-Type：application/json
请求体：
{
  "id": number, // 用户ID（必须是数字）
  "name": string, // 用户名（字符串）
  "age": number // 年龄（数字）
}
```
**联调前先 "约定类型转换规则"**如果用了 URL 参数（GET）或表单格式（POST），提前和后端约定：
- 前端传 string 还是 number？
- 谁来负责转类型？（推荐后端转，因为后端更清楚自己需要什么类型）

六、最后总结

回到开头的问题："菜鸟后端不知道传的是 number 还是 string"------ 其实不是后端菜，而是双方都没搞懂 "参数类型由传递位置决定"。

记住这 3 句话，再也不用为类型扯皮：

URL 查询参数（不管 GET/POST）：全是 string，后端要转类型；
JSON 格式的 POST 请求体：能传 number/string，后端直接接对应类型；
表单格式的 POST 请求体：全是 string，后端要转类型。

前后端协作，"约定" 比 "技术" 更重要。下次联调前，先把 "参数格式和类型" 说清楚，能少走 90% 的弯路～