Nginx部署前端项目线上环境ajax跨域问题汇总

Nginx是什么

Nginx可以作为反向代理服务器、静态资源服务器、负载均衡器、API网关服务、HTTP缓存中间件等等，本篇我们着重讲一下前两者。

前后端分离项目上线流程

什么是前后端分离项目，什么是传统项目，我这里就不过多概述了，本次案例我以SpringBoot2+Vue2为基础框架来说明上线流程：

• 首先前端通过npm run build进行打包，打包成为浏览器认识的三件套，目录默认叫dist
• 其次后端通过spring-boot-maven-plugin插件进行打包，打包为jar文件
• 然后购买云服务器，一般用的就是Linux，我这里采用的是Centos8，分别开启前后端的端口
• 在服务器安装Java环境，然后运行SpringBoot的jar文件
• 然后再在服务器上安装docker，在docker拉取一个Nginx镜像并且启动这个Nginx容器，将dist放到其html目录下
• 然后就可以进行前后端联调测试了

 

前端项目跨域问题

我们知道，在本地测试时，我们会使用脚手架配置一个临时的服务器解决跨域，而打包后，脚手架自然而然就不存在了，那此时如何解决跨域呢？这里就用到我们的Nginx了，通过配置Nginx的nginx.conf文件可以解决这个问题

这是我nginx.conf文件的配置：

通过http这个配置内的server配置配置了location / 默认访问的位置是/usr/share/nginx/html/dist，然后那个try_files配置是为了解决刷新页面保存404的问题，最后下面有一个location /api/ 配置,这里就是解决跨域问题的