Vue axios 跨域 post参数传递问题

最新推荐文章于 2022-09-14 11:23:19 发布

转载最新推荐文章于 2022-09-14 11:23:19 发布 · 956 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/zxh1220/article/details/88544272

收录于

Vue

当前文章被收录于：

Vue

39 篇文章 0 人学习

订阅专栏查看详情

跨域

当前文章被收录于：

跨域

2 篇文章 0 人学习

订阅专栏查看详情

当前文章被以下社区和专栏收录：

探讨Vueaxios在跨域POST请求中遇到的问题，当后端使用Java Spring MVC并注解@RequestParam时，如何正确传递JSON参数。分析axios默认处理及解决方法，包括使用URLSearchParams进行参数转换。

Vue axios 跨域 post参数传递问题

原因就是这次的接口使用 java spring mvc
并且在这个方法上使用了注解 @RequestParam

那么这个是什么意思呢，这个是只能从请求的地址中取出参数，也就是只能从 username=admin&password=admin这种字符串中解析出参数。

查看Content-Type：
application/json;charset=UTF-8
axios会帮我们转换请求数据和响应数据以及自动转换 JSON 数据
在这里插入图片描述
在 axios 源码中发现下面这段内容：（很关键）

这两种形式无一例外都触发了 axios 源码中【很关键】的那一段代码

问题分析

我们传递的 Content-Type 变成了 application/json;charset=utf-8
因为我们的参数是JSON对象 axios 帮我们做了 stringfy 的处理
而且查阅 axios 文档可以知道：axios 使用 post 发送数据时，默认是直接把 json 放到请求体中提交到后端的。

解决方案解决方案一

【用 URLSearchParams 传递参数】传递过去的JSON对象会被转成字符串

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
    method: 'post',
    url: '/api/lockServer/search',
    data: param
})

转自 https://blog.csdn.net/zxh1220/article/details/88544272

标签

#Vue