阿狗工具

最近跟同事讨论，就遇到这个很有趣的话题，直接说结论，浏览器中不能，nodeJS中可以，即客户端不可以，服务端可以。

浏览器环境

现在常用的请求方式分为俩种：

1. axios
   axios分俩种，一种是浏览器环境，另一种是服务端环境。浏览器环境用的是XHR，服务端环境用的是fetch。

   XHR是我们前端开发的老朋友了，但是我们可能很少会去看他的文档，也很少会真正遇到开发场景是get请求需要在body传参的，大家都理所当然地认为，get请求只能在 UrlQueryParams也就是url上面传参，那么如果我们尝试把参数扔到body上，对于axios的写法即如下所示：

import axios from 'axios';

function MyButton() {
  const test = async () => {
    await axios({
      method: 'GET',
      headers: { 'content-type': 'application/json' },
      data: {
        firstName: 'Fred',
        lastName: 'Flintstone',
      },
      url: '/user?ID=12345',
    });
  }

  return (
    <button onClick={() => test()}>
      I'm a button
    </button>
  );
}

export default function MyApp() {
  return (
    <div>
      <h1>Welcome to my app</h1>
      <MyButton />
    </div>
  );
}

body参数没有，只有params

上述代码在params以及body都进行传参，结果只看到了param参数，body参数无显示。

我们看到XHR的文档就会发现他有一句话，如果请求方式是GET或者HEAD，会忽略body，将其设置为null，所以这就是浏览器不能在GET请求的body中传参的原因。

XHR会忽略GET请求的body

2. fetch
   fetch是目前比较新的请求API，也因为兼容性越来裕豪的原因开始广泛使用，直接上示例：

async function getData(url = '', data = {}) {
  const response = await fetch(url, {
    method: 'GET', // *GET, POST, PUT, DELETE, etc.
    mode: 'cors',
    cache: 'no-cache',
    credentials: 'same-origin', 
    headers: {
      'Content-Type': 'application/json'
    },
    redirect: 'follow', // manual, *follow, error
    referrerPolicy: 'no-referrer', 
    body: JSON.stringify(data)
  });
  return response.json(); // parses JSON response into native JavaScript objects
}

getData('https://example.com/answer', { answer: 42 })
  .then(data => {
    console.log(data); // JSON data parsed by `data.json()` call
  });

直接提示Get/Head请求方式不能有body参数。

提示Get请求不能有body

服务端环境

只要请求库无限制，想怎么传怎么传

总结

1. get请求不能放body上是一种HTTP标准，实际上是无限制的，限制的是浏览器环境中XHR以及fetch的实现

2. 为何还会有get请求参数放body这种骚操作？跟RESTful规范有关，原则上获取数据，参数多的话，最好放body（因为在各大浏览器标准中，url长度是有限制的）

3.以HTTP标准为主还是以RESTful标准为主。在大环境中肯定是以http标准为主的，即get请求body不能生效；如果一定要使用RESTful API，可以以服务端转发的方式/BFF的形式去实现。