说实话，前后端分离并不难。前后端分离后，Java工程师只需要专心写页面。在我看来，工作比以前轻松多了。如果让专业的前端工程师来写前端页面，其实也不难。Vue是三个前端框架中最容易使用的。那么它有多难呢？让同一个人既写前端又写后端！我知道很多朋友在这里总是一头雾水。很多人问得最多的问题就是前后端如何通信？跨域是怎么解决的？正好宋哥最近在这里踩坑了，所以就来和大家聊聊这个问题。不跨域的跨域如果你直接在项目中引入Vue，像jQuery一样使用Vue，那是没有问题的，你应该不会对跨域产生任何疑虑。但是如果你做的是单页应用（SPA），那么肯定会有这样一个问题，如何处理跨域问题！因为在单页应用中，前端项目可以单独通过node启动，占用一个端口。后端项目启动后，也是另外一个端口。这个时候请求是从前端发到后端的，因为两者在不同的端口，所以一定是跨域问题。但是想想，这个跨域可能只存在于开发环境，生产环境可能不存在。因为当项目开发完成后，我们将前端项目打包，打包后部署到Nginx上，或者直接拷贝到后端项目运行（一般使用前者）：如果是前者，则后面-end接口也是通过Nginx进行映射的，此时不会出现跨域问题。如果是后者，那就更简单了。部署的时候，前后端代码放在一起，不会出现跨域问题。所以，要解决这个所谓的“跨域”问题，我们不能按照传统的思路（通过JSONP或者CORS），因为在项目真正上线之后，所谓的跨域问题可能就消失了。那么如何解决这个问题呢？我们可以在前端nodejs中配置请求转发。配置请求转发并不难，只是vue-cli2和vue-cli3的写法略有不同，这也是我前段时间踩坑的地方。vue-cli2解决方案如果我们使用vue-cli2创建一个SPA应用，创建成功后，在项目的config目录下会有一个index.js文件。在这个文件中，我们可以配置请求转发，如下图：Configuration内容如下：module.exports={dev:{//PathsassetsSubDirectory:'static',assetsPublicPath:'/',proxyTable:{'/':{target:'http://localhost:8082',changeOrigin:true,pathRewrite:{'^/':''}},'/ws/*':{target:'ws://127.0.0.1:8082',ws:true}},...}proxyTable就是我们配置的Forward路由表。我们在这里面配置了两个规则：第一个是拦截所有的HTTP请求，转发给后端服务器（前端默认端口是8080），后端端口是8082。至于拦截规则/，大家可以根据实际情况自定义编写。比如所有的HTTP请求都有一个统一的前缀api，那么这里可以写成/api。二是拦截所有websocket请求转发。我已经给所有的websocket请求一个统一的前缀/ws。如果你有更多的拦截规则，可以在这里继续配置。这些配置只会在开发项目编译打包时使用，不会打包这些配置。也就是说，当项目发布时，这些配置将失效。这时候我们可以使用Nginx或者将前端代码拷贝到后端。解决生产环境中的跨域问题（相当于生产环境中不存在跨域开发时间）。相对来说这里vue-cli2的配置还是比较容易的。vue-cli3的解决方案vue-cli3去年就出来了，当时就尝到了滋味，不过可能vue-cli2用的时间长了，我也不会愿意接受vue-cli3的一会儿，等我尝鲜之后就爱不释手了，用起来也不是很有用。直到前两天，新项目尝试了vue-cli3，但是在请求转发的时候掉坑里了。一开始也没多想，还是vue-cli2中的老方法，不过是在vue-cli3创建的项目的vue.config.js文件中配置的。应用没有config目录，所以我们需要在vue.config.js配置文件中配置请求转发配置。一开始我直接复制了vue-cli2中的请求转发配置，所以发HTTP请求没问题，但是websocket请求一直有问题。仔细分析后发现，两者在请求转发配置上还是有一点点区别的。我们看一下vue-cli3中的请求转发配置（这也是我这里的vue.config.js文件的完整内容）；让proxyObj={};proxyObj['/ws']={ws:true,target:"ws://localhost:8081"};proxyObj['/']={ws:false,target:"http://localhost:8081",changeOrigin:true,pathRewrite:{'^/':''}};module.exports={devServer:{host:'localhost',port:8080,proxy:proxyObj}}首先，我们创建一个proxyObj来存储各种代理对象。至于proxy的内容，和vue-cli2中一样，没有太多区别。需要注意的是，在HTTP请求代理中，多了一个属性ws:false。用过vue-cli3的同学可能已经发现，如果不加这个属性，浏览器控制台会一直报socket无法连接的错误。添加它会很好。最后在devServer中指定项目的host和port，然后配置代理对象。这是我们在vue-cli3中请求的配置。不过这里的配置老实说不难，做一次就可以了，如果没做过，第一次可能要折腾很久。结束语很多小伙伴一直对前后端分开开发，前后端请求如何打通有疑惑。希望这篇文章能给你一些启发。
