Vue-cli配置代理post方式访问springboot接口报错

Springboot与Vue相关版本

• 2.2.6.RELEASE
• vue-cli版本3.6.0

报错提示如下

# 异常1
Resolved [org.springframework.http.converter.HttpMessageNotReadableException: 
I/O error while reading input message; 
nested exception is org.apache.catalina.connector.ClientAbortException: 
Unexpected EOF read on the socket]

vue.config.js的代理配置如下

module.exports = {
  publicPath: '/',
  outputDir: 'dist',
  assetsDir: 'static',
  lintOnSave: false,
  productionSourceMap: false,
  devServer: {
    port: 8080,
    open: true,
    disableHostCheck: true,
    proxy: {
      "/api": {
        target: process.env.VUE_APP_SERVER,
        ws: false,
        changeOrigin: true,
        secure: false,
      },
    },
    before: require('./mock/mock-server.js')
  }
}

前端axios访问的几种方法的封装

方式一

• [前端]使用FromData

    export function testFormAction() {
        let form = new FormData()
        form.append("zid",123)
        request.post("/test/form",form).then((res)=>{
            console.log(res)
        })
    }

• [后端]

    @RestController
    public class TestController {
        @PostMapping("/test/form")
        public Map testFormAction(Article article){
            System.out.println(article.getZid());
            Map map = new HashMap();
            map.put("code",200);
            map.put("msg","add success");
            return map;
        }
    }

1.这种形式访问没有问题;前后端都可以响应成功

方式二

• [前端]使用json

    export function testJsonAction() {
        let form = {zid:123}
        request.post("/test/json",form).then((res)=>{
            console.log(res)
        })
    }

• [后端]

    @PostMapping("/test/json")
    public Map testJsonAction(@RequestBody Article article){
        System.out.println(article.getZid());
        Map map = new HashMap();
        map.put("code",200);
        map.put("msg","add success");
        return map;
    }

    //javabean
    public class Article {
        private Long zid;
        public Long getZid() {
            return zid;
        }
        public void setZid(Long zid) {
            this.zid = zid;
        }
    }

1.这种形式就会报错
Resolved[org.springframework.http.converter.HttpMessageNotReadableException: I/O error while reading input message; nested exception is org.apache.catalina.connector.ClientAbortException: Unexpected EOF read on the socket]

方式三

• [前端]

    export function testV() {
      let data = {zid:"123",is:"false"}
      return request({
        url: "/test/trans",
        method: "POST",
        data,
        transformRequest: [function (data) {
          let ret = ''
          for (let it in data) {
            ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
          }
          return ret.substr(0,ret.length - 1)
        }],
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      })
    }

• [后端]

    @PostMapping("/test/trans")
    public Map testTransAction( Article article){
        System.out.println(article.getZid());
        Map map = new HashMap();
        map.put("code",200);
        map.put("msg","add success");
        return map;
    }

这种也有错误，打印出来的结果是null

备注

• 以上几种post方式请求并且使用代理的情况
• 不使用vue-cli中代理的话，一切接口访问都正常；已经使用postman测试；
• 使用后端允许前端跨域的模式访问接口，一切都正常，已使用postman测试；
• 附上本人的前后端的源码前端vue,后端springboot