前端遇坑记录（三）——axios请求的参数自动拼接到url后面

最新推荐文章于 2025-05-27 20:54:00 发布

原创最新推荐文章于 2025-05-27 20:54:00 发布 · 3w 阅读

17 ·

CC 4.0 BY-SA版权

前端专栏收录该内容

9 篇文章

订阅专栏

本文记录了一次使用Axios库发送HTTP请求时遇到的问题及解决过程。作者在尝试通过Axios传递参数时遇到了困难，经过查找文档发现使用data而非params可以解决参数附加到URL后的问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

遇坑如题，这东西搞了我大半天。google 百度 StackOverflow 一通找，就是搞不定。

我秉承一个原则，问题在网上线索寥寥，要么就是问题难+小众，没几个人分享。

要么就是问题太简单，没人会问。

我相信我这个是后者。

所以，我最后才想到去看axios的文档...发现它传参有两种方式，一种是params，一种是data，

而params会默认把要传的参数添加到url后面。。。

OK，用data，问题解决。

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

东根

关注关注

17
点赞
踩
17

收藏

觉得还不错? 一键收藏
11
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

等级保护应用安全规范：对接口的请求参数进行签名校验（参数按照ASCII码从小到大排序、拼接、加密）

专注于计算机研发知识和资讯分享

01-02

785

参数按照ASCII码从小到大排序、拼接、加密（采用递归的方式进行实现。如果添加属性记得修改set get里面 map的大小。

vue.cli项目封装全局axios，封装请求，封装公共的api和调用请求的全过程

最新发布

Qsny999的博客

05-27

458

如上，实现一个获取随机获取笑话的请求，我们需要用.then()来接收数据，代码较为冗杂。后续的引用只需要用.get方法就可以实现对数据调用和刷新，相比http.createHttp()更加的简便。

使用axios，post传参时，将参数自动拼接到url后面

我是星星的博客

05-08

6934

今天工作时，后端要求post传参，而且必须将参数拼接到地址栏中，心想不是只用get才可以将参数拼接到后面么？post传递一般来说就是个对象，后来经过查阅，发现，原来在post请求时，也可以将参数拼接到地址栏中，post传参，将参数携带到地址栏中就OK了。封装导出post方法。调用getData方法。

前端那些事20231218-axios发起post请求，url后面的参数自动拼接到Request URL上

qq_41632427的博客

02-27

850

前端

axios请求的参数自动拼接到url后面

苍山负雪_Stacking

06-30

3120

axios的传参有两种方式：一种是params 一种是data 而params会默认把要传的参数拼接到url路径后面

Axios请求（对ajax的二次封装）——Axios API、Axios实例、请求配置、Axios响应结构

XSL_HR的博客

04-14

1692

一篇文章带你学会axios请求——Axios API、Axios实例、请求配置、Axios响应结构

Vue2 工程创建——axios获取后台数据

weixin_46966741的博客

04-20

728

vue.config.js 文件夹下添加属性lintOnSave: false, // eslint-loader 是否在保存的时候检查。1. 在命令行中运行命令 npm install -g vue-cli ，然后等待安装完成。是否安装成功：vue -V。1.安装 npm install --save axios。2.1系统环境变量配置：路径与安装node盘符对应。（node缓存）位置，放在node安装文件下。node -v 查看node版本。一、node安装与环境变量配置。

Axios 源码解读 —— 网络请求篇

qq_34621851的博客

01-15

678

上一章我们介绍了 Axios 源码解读 —— request 篇，这一章我们来介绍 Axios 实际发起网络请求的部分吧，也就是 dispatchRequest 方法。 dispatchRequest 这个方法定义也比较简单（如下图）第 29 行 —— 取消请求我们来逐行解析每一行代码所做的事情吧，首先是第 29 行的取消请求。（如下） throwIfCancellationRequested(config); 这个动作不仅仅在发起正式请求前做了一次，而且在请求成功和请求失败时都做了一次。只要是被

前端下载时传递参数将参数拼接在接口（url）后面传递给后端

as965874的博客

11-09

3576

需求：常见的传递参数都是将参数写在花括号里面，但是有时候花括号并不适合，可以选择将参数拼接到接口后面 let url = this.paramConfig.httpPath + '/basedata/download?baseDataID=' + ss.join(',') + '&Area=' + window.sessionStorage.getItem('userArea') 完整的代码如下，实

axios发带url参数的post请求

lx233

03-22

1328

可以尝试这样 import qs from 'qs' export const xxx = (params,data)=>axios.post( `${api_base}/xxxxxxxxxxxxxxxxxx?a=query&${qs.stringify(params)}`, qs.stringify(data), { withCredentials: true });

axios请求，往URL中拼接字符串以及传递参数的方法

逆风优雅的博客

11-08

7954

一：仅仅拼接字符串针对后端给的这种接口的地址，我们前端配置的方式可以采用下面的形式：二、即需要拼接地址，又需要传递参数的写法：使用方式：

axios get请求动态拼接url

vue+iview 动态渲染表格（vue.js结合iview插件）

07-05

311

【代码】axios get请求动态拼接url。

Vue项目中使用axios如何进行参数拼接

m0_61886740的博客

06-22

2337

Vue项目中使用axios如何进行参数拼接

axios发起post请求 url总是自动携带参数导致访问后端失败

qq_34112931的博客

09-03

2009

原因：axios请求配置中有 data 和 params参数 data 参数适用于 put、post、patch请求； params 参数适用于 get请求；因为 post请求却使用配置params传参导致参数自动追加到url 导致访问出错 Controller 中 @RequestBody 注解用于接收请求body中的参数例如 post 请求携带的body @...

Axios——认识 URL

m0_57184906的博客

03-21

1407

Axios——认识和了解 URL 的组成

【vue+axios】get请求如何在地址栏上拼接参数

栀妹儿的炼丹炉

03-10

5497

1、逗号分割、get请求、params作为属性将会拼到url： 2、直接在url中加上字段?xxx= 效果同上

前端axios流式响应

02-20

### 如何在前端使用 Axios 处理流式响应为了实现前端流式响应处理，可以利用 `axios` 发起 HTTP 请求并指定 `responseType` 为 `'stream'`。这样做的目的是让服务器能够逐步向客户端传输数据而不是一次性全部发送完毕。当采用这种方式时，接收到的是 Node.js 的可读流（Readable Stream），允许监听特定事件如 `data` 和 `end` 来分片处理传入的信息[^1]： ```javascript const axios = require('axios'); // 创建 GET 请求以获取 PDF 文件作为流形式 axios({ method: 'get', url: '/example.pdf', // 替换为目标资源的实际 URL responseType: 'stream' }).then((response) => { let chunks = []; response.data.on('data', (chunk) => { console.log(`Received ${chunk.length} bytes of data.`); // 将每一片数据存储起来以便后续操作 chunks.push(chunk); }); response.data.on('end', () => { console.log('All parts have been received.'); // 此处可以根据需求拼接完整的文件或其他业务逻辑 const completeData = Buffer.concat(chunks); // 假设这里是要保存下载下来的PDF文档到本地磁盘上 fs.writeFileSync('./downloaded_example.pdf', completeData); }); }); ``` 上述代码展示了如何定义一个异步函数用于发起带有适当配置选项的请求，并注册两个主要事件处理器——一个是用来累积来自服务端的数据片段；另一个则是在整个传输过程结束后执行清理工作或进一步的操作。值得注意的是，在实际项目开发过程中可能还需要考虑错误处理机制以及更复杂的场景下对于流媒体类型的特殊支持等问题[^3]。