​

写在前，跨域的根本原因是浏览器的**同源策略**：

同源策略：是一个重要的安全策略，它用于限制一个origin的文档或者它加载的脚本如何能与另一个源的资源进行交互。它能帮助阻隔恶意文档，减少可能被攻击的媒介。

同源定义：如果两个URL的protocol、port(如果有指定的话)和host都相同的话，则这两个URL是同源。这个方案也被称为“协议/主机/端口元组”，或者直接是“元组”。（“元组”是指一组项目构成的整体，双重/三重/四重/五重/等的通用形式）。

下表给出了与URLhttp://store.company.com/dir/page.html的源进行对比的示例:

更多详情可访问===》浏览器同源详细介绍

实际如下图所示：

​

那么，通常有以下三种方式解决跨域：

1.均使用tomcat部署，这样ip端口一样，浏览器同源策略也符合；

2.把Vue项目打包放进后端的static（以springboot项目为例）文件中，访问使用路径的方式访问；

3.使用Nginx反向代理部署【推荐】。

一，Tomcat方式

这种方式就比较简单，启动tomcat，把前端资源和后端项目放到tomcat的webapp下，这样前后端的ip和端口端口都一样，也就不会出现跨域问题了。

二，打包放入后端项目static中

这种方式类似第一种方式，均使用后端项目的端口，使用app静态文件路径访问

三，Nginx反向代理

这是推荐的方式，核心就是让前端服务访问同源同端口下的不同后端项目，而在Nginx中对该path进行拦截。

比如，你的前端应用地址是ip:8080，后端应用地址是ip-manage:8088，那么，只需要配置后进行转发即可，注意，配置后，前端应用的访问路径仅改变path，协议（protocol）主机（host）端口（port）需保持一致。

1，安装

这里不详细介绍安装Nginx，这里大家可以先去搜一下安装，很简单。

2，配置

安装完成后，打开Nginx配置文件nginx.conf：

mac中的路径为：/usr/local/etc/nginx/nginx.conf

然后进行如下配置：

比如，你的后端接口实际地址为xxxx:8080/api/get/userinfo

那么，你只需要增加：

然后，在前端请求api的时候，就使用Nginx的端口地址即可。

3，示例

比如，我们把前端项目部署在80端口，请求后端的api则使用http://xxxx/api/get/userinfo即可，Nginx会自动转发到8080端口上，参考下图：

​

4，重载Nginx配置

配置完成之后，使用以下命令刷新配置（mac为例）

brewservicesreloadnginx

然后，再次启动你的项目，你会发现可以正常访问了！

注意事项：

1. 文中的同配/api/是示例，具体配置请根据实际后端路径更改。