使用 Nginx 部署前后端分离项目时，解决跨域问题
1. 什么是跨域
很多人对前后端分离部署感到困惑，其实主要是困惑跨域问题怎么解决。因为前后端分离项目在开发的时候，前端通过 nodejs 来运行，需要一个单独的端口，后端通过 Tomcat 或者 Jetty 来运行，也需要端口，两个不同的端口，就造成了跨域。 这种跨域并不是我们传统开发中真正的跨域，这个所谓的跨域只在开发环境中存在，生产环境下就不存在这个跨域问题了。所以我们不能按照以往的通过 JSONP 或者 CORS 之类的手段来解决这个跨域问题。 前后端分离开发中，前端为了能够模拟出测试数据，并且模拟出请求，一般需要借助于 nodejs 来运行，这是开发时候的状态，开发时候的配置大家可以参考这篇文章
2.前后端分离
等开发完成后，我们会对前端项目编译打包，编译打包完成之后，就只剩下一堆 js、css 以及 html 文件了，我们把这些编译打包后的文件拷贝到后端项目中，这样再去运行就不存在跨域问题了（例如将编译打包后的静态文件拷贝到 Spring Boot 项目的 src/main/resources/static 目录下）。这种方式我就不再多说了，相信大家都会，今天咱们主要来看看如何结合 Nginx 来部署。
3.Nginx 大杀器
结合 Nginx 来部署前后端分离项目算是目前的主流方案。一来部署方便，二来通过动静分离也可以有效提高项目的运行效率。 大家知道我们项目中的资源包含动态资源和静态资源两种，其中： 1 . 动态资源就是那些需要经过容器处理的资源，例如 jsp、freemarker、各种接口等。 2 . 静态资源则是那些不需要经过容器处理，收到客户端请求就可以直接返回的资源，像 js、css、html 以及各种格式的图片，都属于静态资源。 将动静资源分开部署，可以有效提高静态资源的加载速度以及整个系统的运行效率。 在前后端分离项目部署中，我们用 Nginx 来做一个反向代理服务器，它既可以代理动态请求，也可以直接提供静态资源访问。我们来一起看下。
4.后端部署
5.前端部署
以 Vue 为例，如果是 SPA 应用，项目打包之后，就是一个 index.html 还有几个 js、css、images 以及 fonts ，这些都是静态文件，我们将静态文件首先上传到服务器，然后在 nginx.conf 中配置静态资源访问，具体配置如下：location ~ .*.(js|css|ico|png|jpg|eot|svg|ttf|woff|html|txt|pdf|) { root /usr/local/nginx/html/;#所有静态文件直接读取硬盘 expires 30d; #缓存30天 } 当然我这里是按照资源类型来拦截的，即后缀为 js、css、ico 等的文件，统统都不进行请求分发，直接从本地的 /usr/local/nginx/html/ 目录下读取并返回到前端（我们需要将静态资源文件上传到 /usr/local/nginx/html/ 目录下）。 如果我们的服务器上部署了多个项目，这种写法就不太合适，因为多个项目的前端静态文件肯定要分门别类，各自放好的，这个时候我们一样可以通过路径来拦截，配置如下：location /jinlu-admin/ { root /usr/local/nginx/html/jinlu-admin/;#所有静态文件直接读取硬盘 expires 30d; #缓存30天 } 这样，请求路径是 /jinlu-admin/ 格式的请求，则不会进行请求分发，而是直接从本机的 /usr/local/nginx/html/jinlu-admin/ 目录下返回相关资源。采用这方方式配置静态资源，我们就可以部署多个项目了，多个项目的部署方式和上面的一样。 这样部署完成之后，假设我的域名是 javaboy.org ，那么用户通过 http://www.javaboy.org/jinlu-admin/**格式的请求就可以访问到前端资源了。 此时大家发现，前端的静态资源和后端的接口现在处于同一个域之中了，这样就不存在跨域问题，所以我一开始基说不必用 JSONP 或者 CORS 去解决跨域。特殊情况可能需要在 nginx 中配置跨域，这个以后再和大家细聊~ 好了，不知道小伙伴有没有看懂呢？有问题欢迎留言讨论。
