【Vue】轻松解决前后端分离部署中的跨域问题

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

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

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

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

URL	结果	原因
http://store.company.com/dir2/other.html	同源	只有路径不同
http://store.company.com/dir/inner/another.html	同源	只有路径不同
https://store.company.com/secure.html	失败	协议不同
http://store.company.com:81/dir/etc.html	失败	端口不同 ( http:// 默认端口是80)
http://news.company.com/dir/other.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 转发
location /api/ {
    proxy_pass http://xxxx:8080;
}

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

3，示例

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

4，重载Nginx配置

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

brew services reload nginx 

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

---

注意事项：

1. 文中的同配 /api/ 是示例，具体配置请根据实际后端路径更改。
2. 分不同服务器部署的设置转发暂时未实验过，有实验过的小伙伴可以评论区告知下。