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/ 配置,这里就是解决跨域问题的关键，使用proxy_pass将所有的ajax请求反向代理到后端服务器，然后看前端的request.js请求工具是怎么写的：

这是我的前端代码，这里封装了axios，设置了基础URL为我的域名，这个域名解析的就是上面的那个212那个IP地址，可以看到，这里后缀跟了个/api，那么就说明所有访问api的请求，都会路由到nginx的那个location /api/里面。

然后这里有个小细节：

然后通过测试，发现如果是通过域名访问的前端项目，则所有api请求都可以正常走通，而通过IP地址访问，则全报CORS也就是拒绝跨域资源共享的问题，这是为什么？

通过详细了解跨域触发的条件，原来啊，就算我的IP是具体的我的某一域名解析的，它也会触发跨域，也就是域名与其所解析后的IP地址是同一个，也会有跨域问题，而我前端的js请求工具是配置的域名访问。

• 如果通过IP访问，那么请求就会变成：
• http://IP地址/api
• 而我配置的是访问我的域名的请求：
• http://域名/api
• 通过IP访问，流程就是
  • 用户请求 -> http://IP地址/api -> baseURL(也就是http://域名/api) -> 请求转发到后端服务
  • 显然这里跨域了，所以会拒绝
• 通过域名访问，流程就是
  • 用户请求 -> http://域名/api -> baseURL(也就是http://域名/api) -> 请求转发到后端服务
  • 这里的协议、域名、端口号都是一样的，HTTP请求正常转发