学艺不精，总是掉坑！前后端分离历险记

青旅半醒 2024-04-17 23:35 30阅读 0赞

Spring Boot + Vue 这一对技术栈目前看来可以说是非常的火热，关于 Spring Boot 松哥已经写过多篇教程，如：

*  [40 篇原创干货，带你进入 Spring Boot 殿堂！][40 _ Spring Boot]

前后端分离的文章也写过好几篇了，例如：

*  [一个Java程序猿眼中的前后端分离以及Vue.js入门][Java_Vue.js]
 *  [前后端分离开发思路探讨][Link 1]
 *  [前后端分离时代，Java 程序员的变与不变！][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 文件，在这个文件中，我们可以进行请求转发配置，如下图：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg]

配置内容如下：

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 或者将前端代码拷贝到后端，就可以解决生产环境下的跨域问题了（**相当于开发时候的跨域在生产环境下不存在**）。

相对来说，vue-cli2 在这里的配置还比较容易。

## vue-cli3 方案 ##

vue-cli3 去年出来后，当时就尝了一把鲜，但是可能 vue-cli2 用久了，一时半会还不愿意接受 vue-cli3 ，于是尝鲜完了之后就放下了，没怎么用了。直到前两天，新项目尝试了一下 vue-cli3，结果在请求转发这块就掉坑里了。

一开始没多想，还是 vue-cli2 里边的老办法，只不过是在 vue-cli3 创建的项目的 vue.config.js 文件中进行配置，文件位置如下图：

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 1]

注意，使用 vue-cli3 创建的 SPA 应用，没有 config 目录了，因此请求转发的配置我们要在 vue.config.js 这个配置文件中来配置。

一开始我直接把 vue-cli2 中的请求转发配置拷贝过来，这样发送 HTTP 请求倒是没问题，但是 websocket 请求一直有问题，后来经过仔细分析，发现这两者在请求转发配置上有一点点差异，我们来看看 vue-cli3 中的请求转发配置(这也是我这里 vue.config.js 文件的完整内容)；

首先我们创建一个 proxyObj 用来放各种代理对象，至于代理的内容这里的则和 vue-cli2 中的没有太多差异。要注意的是，HTTP 请求代理中，多了一个属性 `ws: false`，用过 vue-cli3 同学可能发现了，如果不加这个属性，浏览器控制台会一直报连不上 socket 的错，加上就没事了。

最后在 devServer 中指定项目的 host 和 port ，然后再配置一下 proxy 对象就可以啦。

这就是我们在 vue-cli3 中请求的配置。

不过这里的配置老实说没有什么难度，做过一次就会啦，要是没做过，头一次可能得折腾半天。

## 结语 ##

很多小伙伴一直对于前后端分离开发，前后端请求是如何对接的一直有疑问，希望这篇文章能够给你一些启发。如果看懂了，可以点个在看或者转发支持下哦。

![640?wx\_fmt=gif][640_wx_fmt_gif]

![640?wx\_fmt=gif][640_wx_fmt_gif 1]

1、[一键部署 Spring Boot 到远程 Docker 容器，就是这么秀！][Spring Boot _ Docker]

2、[完结撒花！129 集 21 个小时，松哥自制的 Spring Boot2 系列视频教程杀青啦！][129 _ 21 _ Spring Boot2]

3、[40 篇原创干货，带你进入 Spring Boot 殿堂！][40 _ Spring Boot 1]

4、[Spring Boot 中的同一个 Bug，竟然把我坑了两次！][Spring Boot _ Bug]

5、[Spring Boot 支持 Https 有那么难吗？][Spring Boot _ Https]

6、[一个野生程序员的自我修养][Link 2]

7、[干货 | 鸟瞰 MySQL，唬住面试官！][_ _ MySQL]

8、[Spring Boot 修改静态资源一定要重启项目才会生效吗？未必！][Spring Boot]

9、[Spring Boot 跨域，JSONP 太 low，试试 CORS 怎么样？][Spring Boot _JSONP _ low_ CORS]

![640?wx\_fmt=jpeg][640_wx_fmt_jpeg 2]

喜欢就点个"在看"呗^\_^

[40 _ Spring Boot]: https://mp.weixin.qq.com/s?__biz=MzI1NDY0MTkzNQ==&mid=2247486246&idx=1&sn=7aa23f40fa044775e98fccffaa8d43d1&scene=21#wechat_redirect
[Java_Vue.js]: https://mp.weixin.qq.com/s?__biz=MzI1NDY0MTkzNQ==&mid=2247485303&idx=1&sn=0b04836496f2d22dd2dcb116041570e7&scene=21#wechat_redirect
[Link 1]: https://mp.weixin.qq.com/s?__biz=MzI1NDY0MTkzNQ==&mid=2247485813&idx=1&sn=9e36bdcac27a52ff1437fb37e2761a38&scene=21#wechat_redirect
[Java]: https://mp.weixin.qq.com/s?__biz=MzI1NDY0MTkzNQ==&mid=2247485820&idx=1&sn=c624d5fda585b3e3a9864ad6d343325f&scene=21#wechat_redirect
[640_wx_fmt_jpeg]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/GvtDGKK4uYmmjsEnzX60GDYP5amBTCSBibOibqia6tHpHS8FSA0dkLiaribeQeR57wKOBmQiclicp2zQicQN8GwP8h8IGw/640?wx_fmt=jpeg
[640_wx_fmt_jpeg 1]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/GvtDGKK4uYmmjsEnzX60GDYP5amBTCSBe4AT0pibiaqPBG7z3kB8xN1mWoicbJGaIscJiccIOf1bDSl0jbt1vDSm1Q/640?wx_fmt=jpeg
[640_wx_fmt_gif]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_gif/7QRTvkK2qC5Q3Q2JPcAgQibyJut3L80CAvxE9FKNHZ3MlZdLMhD7oYO7k0siaiciblpNuFV6xoenXkrQe3pTRnweVw/640?wx_fmt=gif
[640_wx_fmt_gif 1]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_gif/7QRTvkK2qC6aqek98EtTHUKcyP8jibR2dMpmVDlnHv7DyMlWaib0sO2Qib2XtVPL8wictxAoKMch1iancskn5BpaYcg/640?wx_fmt=gif
[Spring Boot _ Docker]: http://mp.weixin.qq.com/s?__biz=MzI1NDY0MTkzNQ==&mid=2247486342&idx=1&sn=b8adcef8237f3d222816c985ff58b654&chksm=e9c359e6deb4d0f05b28de50e03a59bcc42a0213cac827828d98aa9834979852657f4dd1b613&scene=21#wechat_redirect
[129 _ 21 _ Spring Boot2]: http://mp.weixin.qq.com/s?__biz=MzI1NDY0MTkzNQ==&mid=2247486306&idx=1&sn=a702902990f4cb7fa84c1c23fcba6e92&chksm=e9c35902deb4d0141c7bc42f378542e49b54f2283e2cfe6225542495f3dd65d13c0f1f07fc92&scene=21#wechat_redirect
[40 _ Spring Boot 1]: http://mp.weixin.qq.com/s?__biz=MzI1NDY0MTkzNQ==&mid=2247486246&idx=1&sn=7aa23f40fa044775e98fccffaa8d43d1&chksm=e9c35946deb4d05063a14258429cc7c21b232018a195d7b4281e2a3cea6500fd9f19ab401780&scene=21#wechat_redirect
[Spring Boot _ Bug]: http://mp.weixin.qq.com/s?__biz=MzI1NDY0MTkzNQ==&mid=2247486166&idx=1&sn=ca0528531239410aa4b4a113f10ebc3b&chksm=e9c358b6deb4d1a09f6a0572e829e1fd78f06e7385d08017c0e864ffa32c500f281a6bd9ef04&scene=21#wechat_redirect
[Spring Boot _ Https]: http://mp.weixin.qq.com/s?__biz=MzI1NDY0MTkzNQ==&mid=2247486160&idx=1&sn=2dd53840370ab6a69aa1e910fbce01d1&chksm=e9c358b0deb4d1a6a6d9b2d47b58da3a4a7483147ef84ba059a47d10d7efbc61bcdeff1e503a&scene=21#wechat_redirect
[Link 2]: http://mp.weixin.qq.com/s?__biz=MzI1NDY0MTkzNQ==&mid=2247486150&idx=1&sn=0ffc7a2191058f8aa558c3cf9b062a74&chksm=e9c358a6deb4d1b0a4b16cfeeddd9ae70f483c6494eee55addba648eec757fee371dccb295c8&scene=21#wechat_redirect
[_ _ MySQL]: http://mp.weixin.qq.com/s?__biz=MzI1NDY0MTkzNQ==&mid=2247486126&idx=1&sn=cdfbfc882bdf78ce45147abec317530c&chksm=e9c358cedeb4d1d8390f8481108ca480e0e2e912f7ceceee492733c179a40fc59296f920381a&scene=21#wechat_redirect
[Spring Boot]: http://mp.weixin.qq.com/s?__biz=MzI1NDY0MTkzNQ==&mid=2247486119&idx=1&sn=c2cbf2e7f737fba902f6ebb25dabaefe&chksm=e9c358c7deb4d1d1305abd486554f77af7b35dae40b4f7fb93c109a373f250c57183e5899529&scene=21#wechat_redirect
[Spring Boot _JSONP _ low_ CORS]: http://mp.weixin.qq.com/s?__biz=MzI1NDY0MTkzNQ==&mid=2247486095&idx=1&sn=f446acdf5b26549ccead854b8e0a873f&chksm=e9c358efdeb4d1f9d7b306c25b731fa6baa064bd5dc3051bb386621e0bf74fc969b694588227&scene=21#wechat_redirect
[640_wx_fmt_jpeg 2]: https://ss.csdn.net/p?https://mmbiz.qpic.cn/mmbiz_jpg/GvtDGKK4uYmIjr9YQF4c2uf1ySia2SkGaVFjaY9TSm0ntByic9WYfRKiadmKbzEagg1MJfytUxzc0q7CyIgnfZgEQ/640?wx_fmt=jpeg