前后端分离开发，Vue 如何处理跨域问题？ _Vue

Spring Boot + Vue 这一对技术栈目前看来可以说是非常的火热，关于 Spring Boot 松哥已经写过多篇教程，公号后台回复 666 可以获取 PDF 链接。
前后端分离的文章也写过好几篇了，例如：

一个JAVA程序猿眼中的前后端分离以及Vue.js入门
前后端分离开发思路探讨
前后端分离时代， Java 程序员的变与不变！

相信大家也从中学到了不少干货。
老实说，前后端分离其实并不难，前后端分离之后， Java 工程师只需要专心写接口就可以了，在我看来工作可比以前轻松多了。
如果让一个专业的前端工程师来写前端页面，其实也不难， Vue 算是三大前端框架中最容易上手的了。
那怎么样就有难度了呢？
让同一个人既写前端又写后端！
我知道很多小伙伴在这里总是想不通，很多人 clone 了松哥在 GitHub 上的开源项目下来之后，问的最多的问题就是前后端是怎么通信的？跨域是怎么解决的？刚好松哥最近在这里踩了个坑，就来和大家聊一聊这个问题。

不是跨域的跨域
如果你直接在项目中引入 Vue ，像用 jQuery 那样用 Vue ，那没什么问题，你应该也不会有跨域的疑问。但是如果你做的是单页面应用(SPA) ，那么必然会有这样的疑问，跨域问题怎么搞！
因为在单页面应用中，前端项目可以单独通过 node 启动，它单独占用一个端口，后端项目启动后也是另外一个端口，此时从前端发送请求到后端，由于两者处于不同的端口之上，因此必然存在一个跨域问题。
但是大家想想，这个跨域有可能只是在开发环境下存在，生产环境下有可能不存在。因为当项目开发完成之后，我们对前端项目进行打包，打包后部署在 Nginx 上或者直接拷贝到后端项目中运行都可以（一般使用前者）：

如果是前者，后端接口也通过 Nginx 进行映射，这个时候就不会存在跨域问题了
如果是后者，那就更简单了，部署的时候前后端代码放在一起，更不会有跨域问题了

因此，解决这个所谓的 “跨域” 问题，我们不能按照传统的思路来（通过 JSONP 或者 CORS），因为在项目真正上线后，所谓的跨域问题可能就会消失。
那么这个问题怎么解决呢？我们可以在前端 nodejs 中配置请求转发。
配置请求转发其实不难，不过 vue-cli2 和 vue-cli3 的写法稍有不同，这也是我前一段时间踩坑的地方。

vue-cli2 方案
如果我们使用的 vue-cli2 来创建的 SPA 应用，创建成功之后，在项目的 config 目录下有一个 index.js 文件，在这个文件中，我们可以进行请求转发配置，如下图：

文章插图
配置内容如下：
module.exports = {
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/': {
target: 'http://localhost:8082',
changeOrigin: true,
pathRewrite: {
'^/': ''
}
},
'/ws/*': {
target: 'ws://127.0.0.1:8082',
ws: true
}
},
...
}
proxyTable 就是我们配置的转发路由表。这个里边我们一共配置了两个规则：

第一个是拦截所有 HTTP 请求，将之转发到后端服务器上（前端默认端口是 8080），后端的端口是 8082 。至于拦截规则 / ，大家可以自定义，根据实际情况来写，例如所有的 HTTP 请求都有一个统一的前缀 api ，那么这里就可以写 /api 。
第二个是拦截所有的 websocket 请求进行转发，我这里给所有的 websocket 请求取了一个统一的前缀 /ws

如果你有更多的拦截规则，继续在这里配置就可以了，这些配置只会在开发环境下生效，当项目编译打包时，这些配置是不会打包进去的，也就是说，项目发布的时候，这些配置是失效的，这个时候我们通过 Nginx 或者将前端代码拷贝到后端，就可以解决生产环境下的跨域问题了（相当于开发时候的跨域在生产环境下不存在）。