前言
之前前端的请求端口为8001,可是现在我们又多了8002端口,后面还会有8003、8004……,如何让前端能够请求这么多的端口呢?
也许我们可以写多个BASE_API,分别对应多个端口,可是在vue框架中许多地方都要用到BASE_API,这样修改的地方太多。
这就需要用到Nginx的请求转发了。
一、Windows中下载Nginx
下载地址:http://nginx.org/en/download.html
二、修改conf文件
解压到任意目录后,打开 nginx-1.10.3\conf\nginx.conf(可以先备份一份,避免改错)
1、修改端口号
Nginx默认为80端口,太容易冲突了,改为81端口。
2、配置请求转发
一定要写在http中:
#谷粒学苑配置 server { listen 9001; server_name localhost; location ~ /eduservice/ { proxy_pass http://localhost:8001; } location ~ /eduoss/ { proxy_pass http://localhost:8002; } }
三、修改前端请求地址
之前写的8001,我们现在改为9001。
四、Nginx重启的注意事项
我们在运行Nginx时,是使用命令行运行nginx.exe
关闭Nginx时,直接关窗口并不能停止Nginx,必须通过命令:
nginx -s stop
很多时候重启配置没有生效,也是这个原因,重启可以先用停止命令再用启动命令,也
可以直接使用重启命令:
nginx -s reload
这是一个必须要注意的点。
五、运行测试
启动Nginx、前端、后端8001、8002,
登录后看看请求:
能够登录成功,并且请求已经变为配置的请求转发9001了。
其他功能也正常。
那么我们的Nginx请求转发就配置完成了。