现在，大家大部分项目都是前后端分离吧，那么对于这种项目，分开部署如何通信呢？假如现在我们访问地址是：
前端地址是：http://localhost:8081 (vue+webpack+elementUI)
后端地址是：http://localhost:8080 (spring boot 项目)
一访问就跨域,今天就为大家介绍两种解决办法：
1. Nginx代理
2. 后台设置跨域
对于在这之前重来没有接触过Nginx的我，秒选第二种，但不得已，项目是中间接手，除了源码 ，其他什么都么有 ，你能想象这种痛苦吗？这些都是废话就跟大家抱怨一下，我们回到正题，解决跨域问题。
一：Nginx代理
假如我的请求格式如下：
细心的朋友就会疑问？你这url怎么是相对路径，这样写不好吧，当然你也可以写个全局变量，设置本地、测试、生产 不同的请求地址，然后上线的时候自行配置就可以了，就本地而例：baseUrl = http://localhost:8080/ 然后url:baseUrl+‘Auth/Login’ 这里我们就按照上图为例 这里不再啰嗦了。
安装Nginx
1.访问官网: http://nginx.org/en/download.html
2.直接解压下载文件
【喜欢输入命令的跳过这一步】解压完毕后我们不要着急运行nginx.exe文件，我们先在这个目录建立几个bat处理文件。方便我们以后快捷执行命令。直接新建一个txt文档，每个文档输入以下对应的简单的命令，然后把后缀改成bat文件即可。
-
退出-批处理文件
文件名：quit.bat
文件内容： nginx -s quit -
重新加载配置-批处理文件
文件名：reload.bat
文件内容： nginx -s reload -
启动-批处理文件
文件名：start.bat
文件内容： start nginx -
停止-批处理文件
文件名：stop.bat
文件内容： nginx -s stop
如下图：
3.启动Nginx
启动方式有三种，如下：
- 双击nginx.exe文件，命令行窗口一闪而过，不要紧张，这就代表启动了
- 使用cmd命令行，进入到对应的nginx目录，输入命令 start nginx
- 双击start.bat文件，命令行窗口也是会一闪而过……
打开你的浏览器，输入地址： http://localhost 如果出现以下画面，就代表成功启动啦
当然如果没有出现该画面，就要检查一下自己电脑的80端口是否被其他应用占用，如果要关闭nginx的小伙伴们可以输入命令：nginx -s quit 或者 nginx -s stop 进行关闭，当然写了bat处理文件的童鞋们，也只可以直接双击对应的bat文件进行关闭。
\4.设置代理
成功启动了Nginx，那么我们接下来就开始配置Nginx的反向代理了。打开conf文件夹，打开nginx.conf 的配置文件。
图中的意思是这样的，监控8081端口，转发到 / 里面 结果 localtion /没有转发到任何地址
很尴尬，这种方式不行，万般思考后，得到如下配置：
server{
listen: 80 #监听的端口
server_name: localhost #ip地址
location / { #监听80端口,所有请求都转发到8081的前端地址
root: html;
index index.html index.htm;
proxy_pass http://localhost:8081; #前端地址
}
localtion /Auth { #配置后台数据的接口 所有/Auth的请求都转发到后台地址
proxy_pass http://localhost:8080; #后端地址
}
}
然后保存，关闭nginx.conf文件
注意：
这里并不是只有/Auth（我们请求太多怎么玩） 你可以添加统一的前缀,如: /api （设置参数 baseUrl=’/api’ 然后请求的地方都加上 baseUrl） 这里以 ‘/Auth’ 为例；
如果还是不行的话，就要看看logs下边的日志文件 另寻答案了
这样 我们输入前端地址 http://localhost:8081 然后触发访问后端接口的事件，这样我们就解决前后分离的跨域问题了。
二：后台设置跨域、
至于这种解决方案，就不详细解答了 在这为大家奉上一篇解决办法
https://blog.csdn.net/u011526234/article/details/79711721
三：加油吧，朋友
感想：在这没有搞过这个事情的时候 感觉有点困难，当你仔细去找办法解决的时候，其实也就那样，很简单的，所以，只要多努力点 没有什么办不了，正所谓：天下无难事 只怕有心人