【Vue】轻松解决前后端部署中出现的跨域问题 No 'Access-Control-Allow-Origin' header is present on the requested resource.

废话不多说，部署遇见了跨域问题，如下图所示：

---

有以下三种方法：

1. 均使用 tomcat 部署，这样 ip + 端口一样，浏览器同源策略也符合；
2. 把 Vue 项目打包放进后端的 static（以springboot项目为例） 文件中，访问使用路径的方式访问；
3. 使用 Nginx 反向代理部署【推荐】。

---

一，Tomcat方式

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

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

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

三，Nginx反向代理

这是推荐的方式，因为这样就可以让前后端项目部署在不同端口，启不同的应用。

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. 分不同服务器部署的设置转发暂时未实验过，有实验过的小伙伴可以评论区告知下。