Vue axios post请求400问题。

好几个问题,一起写这吧,做个记录。写的乱,有些东西没说清楚,有空了再查资料吧。
先说解决方法
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没生效。

  • 3
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 7
    评论
评论 7
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值