springbootvue前后端分离 架构图 vue和springboot前后端分离

最近应客户要求要做一个新的系统，考虑到公司很多系统都是jsp+struts老架构后期运维难度越来越大，恰巧公司近几年在也在慢慢向全新的互联网架构转型，公司研发部也采用了前后端分离的架构前端VUE，nodejs，anglar，H5等，后端 springcloud等，故针对新启的项目也操作了VUE+springcloud；前期视觉UI做好之后，后端也简单写了一些api与controller等进行测试；前后端联调由于涉及到跨域的问题，故采用了VUE的代理，前后端交互使用json格式，后端spring使用@RequestBody给对java对象添加注解，@ResponseBody给返回对象添加注解就可以实现对象与json之前的无缝隙转换，但是刚开始联调就出现了意向不到的问题，后端的controller使用idea自带的restful工具请求正常能请求到也能接收到参数，使用postman也正常，但是VUE调用后端的controller之后一直pending 过一会儿返回HTTP  500 系统错误：，通过chrom浏览器的network可以看到，请求头如下：

VUE代理配置如下：
devServer: {
  host:'127.0.0.1'
  port: port,
  open: true,
  overlay: {
    warnings: false,
    errors: true
  },
  proxy: {
    [process.env.VUE_APP_BASE_API]: {
      target: 'http://**.**.**.**:8080',        //修改后台接口地址
      changeOrigin: true,
      pathRewrite: {
        ['^' + process.env.VUE_APP_BASE_API]: ''
      }
  },

  before: require('./mock/mock-server.js')
},

前端错误信息：Proxy error: Could not proxy request /api/**/**  from localhost:9525 to http://**.**.**.**

后端错误信息：HttpMessageNotReadableException

经过一天的研究发现 前后端交互网络上是通的，但是如果后端controller参数添加上@RequestBody 就出问题，删除之后就能正常请求但是无法接受参数，针对这种情况首相想到是前后端交互的数据格式不匹配导致的，但是通过确认浏览器中的http请求发现请求头中的contenttype确实是Content-Type:application/json;charset=UTF-8,看到这里就无语了，数据格式请求类型都对为啥还是不行，于是自己就大胆尝试了一下在VUE代理配置的地方重新设置一下contentype，然后把前端的js对象转传出json字符串，再通过代理调用，奇迹出现了，经常一切正常了；

VUE正确配置如下：

 

proxy: {

  [process.env.VUE_APP_BASE_API]: {
    target: 'http://10.23.252.127:9099',        //修改后台接口地址
    changeOrigin: true,
    pathRewrite: {
      ['^' + process.env.VUE_APP_BASE_API]: ''
    },
    onProxyReq: function (proxyReq, req, res, options) {
      if (req.body) {
        const bodyData = JSON.stringify(req.body);
        proxyReq.setHeader('Content-Type', 'application/json');
        proxyReq.setHeader('Content-Length', Buffer.byteLength(bodyData));
        proxyReq.write(bodyData);
      }
    }
  }

 

到此问题终于解决：

问题产生原因解决方案：

1，方案一：VUE使用代理避免跨域问题，在前后端联调时要显示的设置content-type;并且js封装的object对象要转换成json字符串；

2，方案二：VUE不使用代理，但是要解决跨域问题，后端controller上添加注解：@CrossOrigin

希望本片文章能给刚介入前后端分离的项目的同仁有所帮助！！！