axios发起post请求，url后面的参数自动拼接到Request URL上

最新推荐文章于 2024-06-25 19:46:00 发布

anhui1102

最新推荐文章于 2024-06-25 19:46:00 发布

阅读量1w

点赞数 1

文章标签： javascript ViewUI

原文链接：http://www.cnblogs.com/hz-1762/p/10480274.html

版权

博客讲述了在使用axios进行POST请求时，URL后面的参数自动拼接到Request URL上导致接口失效的问题。通过查看Axios文档，发现POST请求会将params添加到URL中，影响了请求地址。解决方案是对请求进行拦截，确保数据正确传递。

摘要由CSDN通过智能技术生成

最近遇到一个神奇的bug，当通过路由query传参跳转到新的页面时，新页面请求接口的Request URL后面自动拼接上了query传参

具体如下：

跳转路由是这样的

let path = "********";
this.$router.push({path:path,query:{keyWord:"零食"}})

跳转到新的页面后新页面所有请求接口的地址

https://api.*********.com/?g=home_v2&m=taobaoInt&a=search&keyWord=零食

默认请求接口的地址

https://api.*********.com/?g=home_v2&m=taobaoInt&a=search

可以很明显的看到路由query传参到的页面的接口地址被强行增加了keyWord关键字，就是这个关键字导致接口失效。

经过查看Axios说明文档发现可以在请求

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

anhui1102

关注关注

1
点赞
踩
4

收藏

觉得还不错? 一键收藏
0
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

vue+axios全局添加请求头和参数操作

11-20

Vue+Axios的组合提供了便捷的方式来全局添加请求头和参数，确保每次请求都能携带必要的认证信息。本文将详细阐述如何实现这个功能。首先，登录接口通常会返回一个Token，这个Token可以用于后续的接口调用，以验证...

axios发送get/post请求

程麒阁的博客

06-08

437

axios的安装 axios是Vue用来发送ajax的工具，这里我给出下载地址：axios.min.js 我这个版本的axios是最经典的axios版本，如果您的控制台经常报错：axios is not defined，那么你下载它一定可以解决问题发送get请求 axios发送get请求 //携带参数的版本 axios.get('url',{ params: { "key1":"value1", "key2":"value2" } }).then(res => { //打印返回的数

参与评论您还未登录，请先登录后发表或查看评论

【每日一坑】 vue axios

qq_47090956的博客

09-23

660

简单阐述下。

发送post json请求结果总是参数拼在Url中参数1&参数2

最新发布

Williamqin_的博客

06-25

623

你的代码中使用了Axios库的params选项来发送POST请求。默认情况下，Axios会将params中的数据拼接到URL中，并将请求视为application/x-www-form-urlencoded类型，而不是application/json。如果你想要以JSON格式发送请求体，而不是将数据作为查询参数附加到URL中，你应该将数据放在data字段中，而不是params字段中。，并将数据序列化为JSON格式发送到服务器。这样，你的请求将以JSON格式发送，而不是作为查询参数。发送的post请求不是。

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

我是星星的博客

05-08

6044

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

【vue】axios进行post请求传参类型为query

Gua_guagua的博客

07-25

1948

当使用axios进行post请求，传参类型为query时，参数会拼接在请求的URL中，而当参数中含有中文时，会自动对其进行转义编码。仔细观察使用如下所示的请求方法产生的URL。使用axios进行post请求，传参类型为query，请求报错，同样的数据使用swagger进行请求，可以正确返回数值。与使用swagger请求产生的URL是不同的，可见是对中文转义编码不同造成的错误。

表单提交中URL拼接参数（get与post）

小白的记录

12-14

5824

在使用post方式提交表单时，可以直接在地址栏拼接参数： <form action="user?method=register" method="post"> 如上面的action参数，可以直接写目标服务器 但是get传输方式，则地址栏中的参数会先被格式化，再拼接表单中的参数因此要在get方式使用URL参数，可以设置隐式参数即在表单中可以加入<input>标签 <form class="form-horizontal" action="user?me

axios发送请求时用post请求在请求url后面拼接参数

热门推荐

qq_42683842的博客

09-18

3万+

像这种情况明明是post请求，但是在请求的url中拼接了参数其实是在axios.create使用自定义配置新建一个 axios 实例用了params配置项 1. params会将请求的参数拼接到url中去，用于get请求 2. data是添加到请求体(body)里面去，用于post请求 ...

axios使用post请求，路径后面带请求参数参数

Mrs_zh_f的博客

07-17

9661

axios使用post请求，路径后面带请求参数参数首先是前端代码，封装的qequest*（刚开始做前端的后端程序猿）* const service = axios.create({ baseURL: '/api', timeout: 5000, headers: { 'Content-type':'application/json;charset=utf-8' } })...

axios全局注册,设置token,以及全局设置url请求网段的方法

10-17

通过这种方式，每次发送请求时，axios都会自动添加token到请求头，并确保URL是以正确的网段开始。拦截器的使用使得我们可以全局地处理这些共性问题，而无需在每个请求中重复编写相同的逻辑。总结一下，axios的全局...

vue axios post发送复杂对象问题

10-16

在Vue项目中，如果不配置Axios，POST方法默认会将数据拼接在请求地址后面（URL编码），这样的数据格式不利于后台接收和解析。因为这种传输方式无法很好地处理复杂对象的层级结构，导致数据变得不直观。 ### 解决...

原生js 封装get ,post, delete 请求的实例

10-19

对于POST请求，则将参数拼接在请求体（request body）中，并设置了请求头（Content-Type）为'application/x-www-form-urlencoded;charset=utf-8'，以符合表单提交的标准格式。作者还考虑了不同HTTP状态的处理方式...

优雅的处理POST请求URL带参数的情况

41981DC的博客

08-16

1万+

URL 不简单

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

qq_34112931的博客

09-03

1926

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

Post请求，参数跟在url后面的问题

qq_43334498的博客

09-18

1万+

我们知道一般post请求的请求参数是不会跟在url后面的，get请求才会跟在后面，所以大家才说post请求比get请求安全嘛。但是今天写代码的时候，明明我发送的是post请求，参数还是跟在了url后面。

Vue之请求后台POST接口时将参数拼接在url后边传递的两种调用方式

xiaofeiwei521的博客

03-10

1万+

问题还原：项目中实现一个功能时，后台接口是需要三个字符串的POST接口，前台调用时参数需要跟在url后边，如何调用那？后台接口代码如下： @RequestMapping(value = "/***.do",method = RequestMethod.POST) @ResponseBody public HttpResult copy(String id, name, String other) throws Exception { return HttpResult.SUCCESS(***);

Vue axios封装， axios重复请求

weixin_44590591的博客

12-15

2926

第一步：配置axios 首先，创建一个tools.js，这里面存放的是接口配置、请求出错和当前环境配置，我平常elementUI用的比较多，这里你也可以使用自己的UI库。 import { Message } from 'element-ui'; //判断当前环境 let env = window.location.href.includes('test') ? "test" : (window.location.href.includes('me-web-test') || window.

axios发带url参数的post请求

lx233

03-22

1271

可以尝试这样 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的post方式在url上传参

weixin_42283818的博客

11-23

827

![在这里插入图片描述](https://img-blog.csdnimg.cn/5bd98fb0d9d04ac3a7c818bf4ecbce1d.png#pic_center [外链图片转存失败,源站可能有防盗在这里插入!链机制,建描述]议将图片上https://传(imblog.csdtg.cn/KmZv7fe23545433a499b58ef396032d0.png#pic_center986)(https://img-paramsKtUKKmZv-1637653609786)] [外链图片转存.

axios post 传递body参数

11-17

具体区别在于，`data`传递的参数会放到Request Payload中，而`params`传递的参数会被拼接到请求连接后面。以下是两种Axios post请求传递body参数的例子： 1.使用`data`传递请求体参数 ```javascript axios({ ...