前端Get请求能在body上传参吗

简介: 【10月更文挑战第11天】 在浏览器环境中,GET请求的body参数会被忽略,这是因为浏览器中的XHR和fetch实现限制了这一行为。而在Node.js服务端环境中,GET请求可以在body中传递参数,因为服务端请求库没有这样的限制。实际上,GET请求不带body是HTTP标准的一部分,但在某些场景下,为了遵循RESTful规范,可以考虑通过服务端转发或BFF模式来实现复杂的参数传递。

最近跟同事讨论,就遇到这个很有趣的话题,直接说结论,浏览器中不能,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>
  );
}

25085372-3a6f853d9354f911.png
上述代码在params以及body都进行传参,结果只看到了param参数,body参数无显示。

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

25085372-ee1f85707e93570f.png

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参数。
1.png
服务端环境
只要请求库无限制,想怎么传怎么传

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

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

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

相关文章
|
4月前
|
缓存 前端开发 中间件
[go 面试] 前端请求到后端API的中间件流程解析
[go 面试] 前端请求到后端API的中间件流程解析
|
17天前
|
前端开发 JavaScript 开发工具
独家揭秘:前端大牛们都在用的高效开发工具,你get了吗?
前端开发领域日新月异,Visual Studio Code、Webpack、React/Vue和Git等工具凭借高效、便捷的特点,深受前端大牛们青睐。本文将揭秘这些工具的使用技巧,帮助你提升开发效率,轻松应对各种前端挑战。
26 3
|
2月前
|
前端开发 JavaScript
回顾前端页面发送ajax请求方式
回顾前端页面发送ajax请求方式
38 18
|
2月前
|
存储 缓存 监控
|
2月前
|
移动开发 前端开发 HTML5
SharedWorker 优化前端轮询请求
【10月更文挑战第6天】
30 1
|
4月前
|
存储 前端开发 Serverless
中后台前端开发问题之Django项目中接收和处理用户的抽奖请求如何解决
中后台前端开发问题之Django项目中接收和处理用户的抽奖请求如何解决
20 0
|
5月前
|
存储 前端开发 安全
前端轮询问题之在setTimeout版轮询中,如何避免旧请求的响应继续触发定时
前端轮询问题之在setTimeout版轮询中,如何避免旧请求的响应继续触发定时
|
5月前
|
前端开发
前端轮询问题之在使用setInterval进行轮询时重复发送请求如何解决
前端轮询问题之在使用setInterval进行轮询时重复发送请求如何解决
154 0
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
146 2
|
2月前
|
JavaScript 前端开发 程序员
前端学习笔记——node.js
前端学习笔记——node.js
44 0