最近跟同事讨论,就遇到这个很有趣的话题,直接说结论,浏览器中不能,nodeJS中可以,即客户端不可以,服务端可以。
浏览器环境
现在常用的请求方式分为俩种:
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>
);
}
上述代码在params以及body都进行传参,结果只看到了param参数,body参数无显示。
我们看到XHR的文档就会发现他有一句话,如果请求方式是GET或者HEAD,会忽略body,将其设置为null,所以这就是浏览器不能在GET请求的body中传参的原因。
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上是一种HTTP标准,实际上是无限制的,限制的是浏览器环境中XHR以及fetch的实现
为何还会有get请求参数放body这种骚操作?跟RESTful规范有关,原则上获取数据,参数多的话,最好放body(因为在各大浏览器标准中,url长度是有限制的)
3.以HTTP标准为主还是以RESTful标准为主。在大环境中肯定是以http标准为主的,即get请求body不能生效;如果一定要使用RESTful API,可以以服务端转发的方式/BFF的形式去实现。