window前端设置nginx反向代理

原文地址: https://dsx2016.com/?p=429

➢ window前端设置nginx反向代理

在项目开发过程中,前端需要模拟服务端数据并解决跨越问题.

mock的方式有很多种:

1. 直接在项目组件中写入静态数据,无需服务端返回

2. 本地设置服务器,如node等,返回json等数据格式,更改host文件达到ip代理的效果

3. 本地设置服务器,直接在当前电脑设置nginx反向代理,对数据进行各种底层设置

第一种前期速度快,但是后期需要把静态数据更改为请求api,会增加工作内容,并且前期无法测试请求的真实状态,比如响应时间,数据格式等

第二种有效果,但是相比nginx在使用上会有一些局限性,具体的这里就不作说明了

➢ 下载nginx

官网地址: http://nginx.org/en/download.html

这里使用的是window,下载window压缩包即可

➢ 修改nginx配置

打开解压缩后的conf文件夹下的nginx.conf文件

把server_name改为发起api的请求地址

server_name  test.com;

把localtion中的代码改为你需要指向的代理地址

 proxy_set_header host $host;
 proxy_pass   http://127.0.0.1:8092;

➢ 运行nginx

进入到有nginx.exe的文件夹

打开当前文件夹的终端,输入./nginx.exe,回车(Enter)

如果光标换行并且保持不动,说明nginx已经成功启动了

➢ 测试API

这里使用PostMan测试,测试成功

➢ Tips

在window下可能会有一些因为进程未关闭导致的代码未生效的假象

这里注意,当修改nginx配置,关闭终端后,再次开启另一个终端运行nginx.exe,可能会有进程遗留

如果始终有异常,先打开任务管理器,看看进程,如果有多个同样的nginx进程,要先把nginx进程全部关闭,再次开启服务就没问题了