开发和生产的前后端分离部署问题？

Question

一，我有个困惑，就是开发环境中假如前端用的vue全家桶，前端的ip地址192.168.1.9:80 其实这个倒是没有什么关系。
我是在想前端和后端分离后开发，那么后端（springboot）在另一个人的电脑上IP地址是192.168.1.10:80那么应该就会产生跨域的问题，所以说后端要设置好跨域这样前端就能直接通过ip进行请求了？
所以我以上的假设是不是目前公司开发前后端分离的情景？

二，就是生产环境下的部署，据我的了解前端vue部署可以直接部署到服务器上，但是如果前端vue和后端springboot
都部署到同一台服务器上设置不同的端口，那么根据浏览器的同源策略也会是跨域的问题，那么在这种情况下部署的问题是前端要怎么修改呢？是访问ip加端口的形式进行请求？后端的跨域设置可以指定ip是这样吗？

上面是我觉得资源有限的情况下，最好的方式是不是：
三，vue部署到web服务器上，springboot部署到server服务器上，这样是目前的主流部署方式吗？
从上面的假设来看，后端都要设置跨域的问题。前端倒是没有什么特殊环境！

四，我觉得不算前后端分离的方案。就是直接在同一台电脑上开发前后端，vue直接写在springboot项目里面。这样开发和生产就可以无缝部署了，不需要担心跨域的问题。

五，还有就是前端和后端分离开发，然后再部署的时候把vue加到springboot的项目里。这样部署的时候要把接口修改下。

上面就是我的假设，也可能大多是错误的，我想问下，大家是怎么样的？
我记得好像是前端有种框架能直接模拟后端API和数据，然后直接访问。

Answer 1

不知道你的问题重点是啥。

到底什么是前后端分离？

对于一：在小公司里面确实是这样的，前端跟后台在同一个局域网，并且接口不需要同一授权系统授权的，可以这样进行前后端分离开发。

对于二、三：在生产环境上，前端需要部署到web服务器上的，例如 NGINX，springboot 需要部署到 Java 容器中，例如 tomcat。

实际上NGINX，tomcat是 2 个软件，是可以部署到同一台云服务器上，访问 web 的时候，是 NGINX 直接提供服务，访问 API 的时候，是通过 NGINX 代理转发到 tomcat，由 tomcat 转到 springboot。

这个时候可以是跨域，也可以不是，跨域是 web 和 API 不同域名，不跨越 是 web 和 API 同域名，由 NGINX 通过 URI 中的特定字符串识别是否为访问 API ， 例如 https://www.abc.com/api/xxxx，中的 /api/。

对于四：在没有前后端分离的概念之前就是这么干的，那个时候需要SEO，服务端渲染，故而会使用模板，但是模板一般都依赖后台框架渲染，所以都是这种集成的方式。

对于五：也是可以的，可以做到并行开发，效率高，集成到springboot里面可以减少部署的麻烦，缺点是性能问题，一般来说处理web的速度远远慢于API的执行速度，这个时候就会出现，web这边的资源不够用，而API有大量空余的情况，不利于动态扩容。

对于模拟数据：例如 MOCK ，我的意见是开心就好，其实我更喜欢自己起一个node后端，直接返回特定的测试数据。

Answer 2

一、如果按你这种部署方式，肯定是要配置跨域的，不过你这种方式并不是最好的部署方式。
二、觉得你的思路有问题，并不一定需要将前后端的项目分开服务器部署（大型项目另说），也不需要将前端项目放到Java里面，也不需要开发完部署到Java里面。如果这样部署，VUE应用刷新浏览器的时候，路由会跑到Java里面去，从而导致页面404。其实完全可以参照开发时的配置，前端是一个项目，后端是一个项目，前端访问API的时候，可以代理到后端服务去。

具体方法是：使用NGINX直接部署单页的前端项目，所有请求都打到项目的首页，另外配置例如/api/getUser这样的以/api开头的数据请求都代理到后端的接口上。简单点说，后端独立部署（是否可以外网访问，自行决定），前端也独立部署，除了api请求，全部返回单页的首页，从而实现了前端域名访问API，不用跨域，单页应用也可以独立运行，不会出现404。

Answer 3

一， 直接使用yapi或者rap之类的接口文档， 可以mock数据也可以维护文档， 功能挺多， 上手也容易， 前后端完全分离开发不互相依赖。
二， 关于跨域， 如果你的服务和客户都支持http1.1的话， 可以直接设置Access-Control-Allow-Origin字段， 或者用一个代理服务器如ngnix又或者使用jsonp。
三， 跨域肯定是后端设置的啦， 如果前端能设置， 那跨域本身就没必要存在了。
四， 这种方式， 需要开发者是全栈工程师
五， webpack打包， 直接用打包命令去修改接口就可以了， 手动改容易出错。