vue axios 请求后端无法传参问题

vue请求后端无法传参问题

问题描述

在学习vue时,使用axios调用后端,发现无法把参数正确传到后端,现象如下:

  1. 使用vue发起请求,浏览器上已经有传参,但是后端没接收到对应的用户名密码:
    在这里插入图片描述
    在这里插入图片描述

  2. 使用postman发起请求,后端可以接收
    在这里插入图片描述
    在这里插入图片描述

处理过程

使用postman发送,一切正常,说明vue的axios配置有问题,或者是我的参数穿的格式不对,参数我是这么传的,一个对象,按道理来说没啥问题,我认为后端会把这个json对象解析付给入参,但是结果却没有:
在这里插入图片描述
网上搜了一下,需要添加form表单头部到axios的header配置中:

{
    "Content-Type": "application/x-www-form-urlencoded;charset=utf-8" }

在这里插入图片描述
再次发起请求:
载荷里面的内容发生了变化,请求载荷变成了表单数据
在这里插入图片描述

后端成功解析到请求参数:在这里插入图片描述

总结

一开始以为请求载荷就是post请求里的表单数据,后面才发现这两个在浏览器的请求中是有区别的:

  1. axios如果直接传对象,不指定是表单数据的话,会自动帮你转成json字符串给后端(后端可以使用@RequestBody接收参数,我试过使用Map可以接收到前端两个参数)
  2. 指定了表单数据头部的话,才会传表单数据(后端可以使用@RequestParam来解析表单数据)

相关推荐

  1. vue3中几种封装让请求方式

    2024-02-16 07:56:01       50 阅读
  2. 前端get请求日期类型参数向失败

    2024-02-16 07:56:01       35 阅读
  3. 各种格式混合vue前端

    2024-02-16 07:56:01       44 阅读
  4. Uniapp 的 uni.request

    2024-02-16 07:56:01       38 阅读
  5. 前端请求格式

    2024-02-16 07:56:01       41 阅读
  6. 前后格式

    2024-02-16 07:56:01       63 阅读
  7. springboot+axios问题

    2024-02-16 07:56:01       33 阅读

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-02-16 07:56:01       94 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-02-16 07:56:01       100 阅读
  3. 在Django里面运行非项目文件

    2024-02-16 07:56:01       82 阅读
  4. Python语言-面向对象

    2024-02-16 07:56:01       91 阅读

热门阅读

  1. GoRules:Go的业务规则引擎

    2024-02-16 07:56:01       61 阅读
  2. Educational Codeforces Round 161 (Rated for Div. 2)(A - E)

    2024-02-16 07:56:01       49 阅读
  3. 学习Spring的第十八天

    2024-02-16 07:56:01       58 阅读
  4. leetcode - 2149. Rearrange Array Elements by Sign

    2024-02-16 07:56:01       49 阅读
  5. mac安装docker-compose

    2024-02-16 07:56:01       60 阅读
  6. C语言-----习题

    2024-02-16 07:56:01       47 阅读
  7. 罗马数字转整数

    2024-02-16 07:56:01       61 阅读
  8. 深度学习代码块之计算模型参数量和显存大小

    2024-02-16 07:56:01       56 阅读
  9. 使用深度学习进行序列分类

    2024-02-16 07:56:01       52 阅读