Vue axios post请求400问题。

本文详细解析了Vue项目中使用webpack解决跨域问题的方法,并阐述了axios请求头Content-Type与后端@RequestParam和@RequestBody注解之间的匹配问题。通过配置proxyTable实现前端地址与后端API的正确映射。

好几个问题,一起写这吧,做个记录。写的乱,有些东西没说清楚,有空了再查资料吧。
先说解决方法
axios默认请求头Content-Type: application/json,也就是json格式.
问题出在后台接收参数是用的@RequestParam,由于RequestParam注解接收的参数是来自于requestHeader中,即请求头,也就是在url中

form-data、x-www-form-urlencoded:需要使用@RequestParam
application/json: 需要使用@RequestBody


众所周知,vue-cli创建的项目,使用webpack打包,本地前后端分离时需要解决跨域问题,一般都是webpack配置文件 config/index.js中配置 proxyTalbe.
nmp run dev启动流程是这样的。scripts/dev/webpack-dev-server.js 会执行这个js。加载webpack.dev.conf.js

webpack.dev.conf.js中会加载config/index.js

 

还有一个是proxyTable代理后,发送请求抓到的包是以前端地址配后端api来完成的,也就是说
 

proxyTable: {
  '/api': {
   target: 'http://192.168.8.103:8088/',
   changeOrigin: true
}

前端地址假如: http://192.168.8.103:8080
后端api为: api/admin/login
但是真实请求是以
http://192.168.8.103:8080/api/admin/login
而非
http://192.168.8.103:8088/api/admin/login

因为代理反向抓取数据是用户不可见的,所以说请求为http://192.168.8.103:8080/api/admin/login
不能说明proxyTable没生效。

评论 7
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值