美文网首页
axios 的post请求坑

axios 的post请求坑

作者: LiviSun | 来源:发表于2019-08-21 14:58 被阅读0次

    最近在学习和实践Vue,搭建了vue+koa的前后端分离架构。vue请求采用的axios。但是遇到一个天坑,axios的post请求,后端接收不到参数。request.body中得到的是 ‘{‘param’:param}:’这种把参数全部变成key ,但是value没有值。
    百度发现这是axios 中一段关键代码引起的,具体是什么代码没去考证,我就纳闷了,这么久了都没有解决,还是说我过去的传参方式已经被淘汰了? 先不管,我们先来解决问题。
    网上有6中解决方案,我参考了一下,在axios的requet请求拦截器中,添加通过qs转换一下

    //http request 请求拦截器
    axios.interceptors.request.use(
        config => {
          config.data = qs.stringify(config.data);
          config.headers = {
            'Content-Type':'application/x-www-form-urlencoded'
          }
           if(store.state.token){
            axios.defaults.headers.common['Authorization'] = store.state.token
           }
          return config;
        },
        error => {
          return Promise.reject(err);
        }
      );
    

    ok 问题解决

    后端 直接通过 koa-bodyparser 自动解析

    const app = new Koa();
    const bodyparser = require('koa-bodyparser')
    app.use(bodyparser())
    
      router.post('/addBanner',async(ctx,next)=>{
        ctx.body=ctx.request.body
      })
    

    相关文章

      网友评论

          本文标题:axios 的post请求坑

          本文链接:https://www.haomeiwen.com/subject/yznbsctx.html