✅作者简介：大家好，我是Leo，热爱Java后端开发者，一个想要与大家共同进步的男人😉😉
🍎个人主页：Leo的博客
💞当前专栏： 报错以及Bug
✨特色专栏： MySQL学习
🥭本文内容：记录一次前后端传参方式不一致异常
🖥️个人小站 ：个人博客，欢迎大家访问
📚个人知识库： 知识库，欢迎大家访问

1.前言

大家好，我是Leo哥🫣🫣🫣，最近在写一个前后端分离案例的demo的时候，一个接口中前端向后端传递的参数方式和后端接收的方式不太一致，出现了问题。具体是啥呢，咱们接着往下聊。好了，话不多说让我们开始吧😎😎😎。

2.问题引出

具体是这样的，听我慢慢道来。

首先我是先开发完了后端接口，通过Apifox测试之后，再去进行前台Vue脚手架的开发。因为Apifox是接口测试，当时并没有发现什么问题。

首先看一下我的后台注册接口，这里因为前台注册只需要传入用户名和密码，所以是通过param这种方式进行接收，而不是通过@RequestBody + User对象把其JSON对象转换为Java对象的方式。

反观前端，下面给出我前台user.js中的注册接口，可能我们正常像后端数据，都是按照我这种方式进行传递JSON数据的。

export const registerService = (registerData) => {
    return request.post('/user/register', registerData)
}

可以看出来下图，这里其实这个请求并不会发出，而是在前端直接拦截住了

就是后台是用param来接参数，而你前台则传递的是JSON数据，所以这里是不给通过的。

但是有的朋友的就问：Leo哥，我记得前台可以通过param传递参数啊。

没错是可以的，但那个是get请求，我这里后台注册接口是post请求，所以不太行哈。

3.解决方案

没错，其实就是我们今天要介绍的主角-----URLSearchParams 。

在Vue的渲染函数中给固定的URL添加参数，你可以使用JavaScript中的URLSearchParams对象来构建查询参数，并将其附加到URL上。

话不多说，直接开干。

只需要new一个URLSearchParams对象，然后把registerData的数据循环添加到参数上，最后传给后台即可。

现在我们再次验证一下我们的接口，进行注册。

可以看出，我们成功进行了注册。

4.总结

以上便是本文的全部内容，本人才疏学浅，文章有什么错误的地方，欢迎大佬们批评指正！我是Leo，一个在互联网行业的小白，立志成为更好的自己。

如果你想了解更多关于Leo，可以关注公众号-程序员Leo，后面文章会首先同步至公众号。

本文由博客一文多发平台 OpenWrite 发布！