最近做项目,前端需要用到nginx反向代理来转发请求,总结了一下在Windows和Mac上的配置,以备查询。
一、Windows
修改nginx的配置文件,nginx.conf。
1)nginx.conf文件,http下,默认打开的server只有一个,监听的是80端口:
http{ XXXXX server{ listen 80; XXXX } }
2)我们手动添加一个server(虚拟机),这样本地使用假数据来模拟请求json文件时,不会因为跨域而请求不到。
http{ XXXX server{ listen 80; XXXX } server{ # 端口,自己定义,注意不要重名 listen 8088; server_name localhost; # Path for static files 项目所在的文件夹,指向编译后的文件夹 # 我这里指向的路径是编译后的文件夹,实际指向你要运行html的文件夹都可以 root D:\BigCity\americanschool\frontend\output; #Specify a charset charset utf-8; # 开启SSI ssi on; ssi_silent_errors off; # ssi针对所有文件类型生效 ssi_types *; #转发所有的json文件的请求 23 location ~(.*\.json){ 24 #我这里json文件放的目录和工程目录是同一个,所以root的地址和上面相同;另外,注意,如果用npm 来编译源文件,源文件中的json可能不会生成到output文件夹,需要手动拷贝,才能正常请求到; 25 root D:\BigCity\americanschool\frontend\output; 26 error_page 405 =200 $1; 27 } 28 } 29 }
3)当后端程序部署后,前端联调时,需要把请求都转到实际的后端,需要再次修改ngnix.conf如下:
server { # 端口,自己定义,注意不要重名 listen 8088; server_name localhost; # Path for static files 项目所在的文件夹,指向编译后的文件夹 # 我这里指向的路径是编译后的文件夹,实际指向你要运行html的文件夹都可以 root D:\BigCity\americanschool\frontend\output; #Specify a charset charset utf-8; # 开启SSI ssi on; ssi_silent_errors off; # ssi针对所有文件类型生效 ssi_types *; # error_log logs/km.error.log warn; #将/test/开头的请求转发到后端服务器 #XXXX是你的后端服务器的ip #对应前端js中的ajax的请求是:/rest/aaaaa/bbbbbb location ^~ /rest/ { 20 proxy_pass http://XXXX/rest/; }}
这样配置后,路径D:\BigCity\americanschool\frontend\output下发起的ajax请求,只要是以/rest/开头的,都会被转发到proxy_pass指向的地址,也就是把http://XXXX和ajax访问的url拼接起来,得到:http://XXXX/rest/aaaaa/bbbbbb
二、MAC下的配置
MAC下,安装好的nginx无法在文本编辑器中修改,只能在“终端”查看;并且没有修改的权限;因此,只能先把nignx.conf文件拷贝出来,更改后,再拷贝回去,注意需要使用sudo。