Nginx在前后端分离项目中的配置

前言

目前基于springboot的web项目所采用的开发模式都是前后端分离的，那么前后端分离的好处带来什么好处呢？
分离后，前端和后端分工程开发，代码不再揉在一个工程中，对于大型项目开发来说更轻量化，管理更方便，开发过程中前端开发人员不再和后端开发人员强依赖。
但前后端分离后也引出新的问题：前后端项目分别部署，不再是同一个wen项目端口，请求服务时浏览器会因为跨域而拦截请求。
为了解决这个问题，我们可以使用Nginx。

Windows安装Nginx

nginx是免安装的，解压即可用。下载地址：Nginx

1. 下载后进入Nginx解压目录，执行start nginx或者双击nginx.exe启动Nginx服务，默认80端口，即可访问http://localhost:80。
2. 如果端口被占用，需要先查看被什么进程所占用。cmd执行指令：

netstat -aon | find "80";
1

执行后可以看到占用端口的进程PID，根据PID查询进程信息：

tasklist | find "XXX";
1

3. 执行nginx -s stop关闭Nginx服务。

前后端分离配置

同一个Nginx服务可以配置多个代理转发关系，每增加一个转发关系，只需在/usr/local/nginx/conf/nginx.conf增加一个server模块。配置示例如下：

server {
listen       80;
        #多个域名用空格隔开
        server_name  #域名示例：baidu.com;
 		location / {
				proxy_set_header Host $host;
                root /web/front; #根目录
                index /index.html; #设置默认页
        }

	    location /api/ {
	        proxy_set_header Host $host;
	        proxy_set_header X-Real-IP $remote_addr;
	        proxy_set_header REMOTE-HOST $remote_addr;
	        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
	        add_header Access-Control-Allow-Methods *;
	        add_header Access-Control-Allow-Origin $http_origin;
	        proxy_pass http://127.0.0.1:8010; #请求转向定义的服务器
	    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

修改配置后执行nginx -s reload配置即可实时生效。
下面对上述配置文件中$host、$http_host的作用对比一下。