nginx搭建前端项目web服务器以及利用反向代理调试远程后台接口

时间:2021-10-10 12:34:26

  前端同学用nginx搭建自己的web服务器,后台程序专门部署在一台服务器上(我们之前公司就有三套环境,开发/测试/生产),这样做的好处是

  1、前端代码基本都是静态文件,重启一次很快,也就几秒钟时间。

  2、不用配置后台语言开发环境,不需要关心后台代码是如何运行起来的,也不用管他究竟用了多少依赖包。

  3、对网络环境不限制,无所谓是内网还是外网。

  这样的想法是不错的,不过需要解决的一个问题是前端搭建了自己的静态服务器后,页面上发出的ajax请求如何回应?因为我们本地是没有真正的后台服务器接口的。所以我们要想办法利用nginx把请求转发到真正的远程后台服务器上,然后后台服务器返回数据给nginx,nginx收到数据后再返回给我们页面。这种技术一般成为请求转发或者叫反向代理。

  (还有一种办法就是通过判断当location.href == localhost 时设置所有的API请求都用绝对路径,然后关闭浏览器的跨域检查。关闭跨域检查方式,右键chrome属性,在目标那里追加: --disable-web-security --user-data-dir=C:\tmp   注意是 追加!!!)

  使用nginx搭建静态服务器这个不难,网上一大堆的教程,这里就不介绍了,难就难在如何请求转发。下面放出一张nginx的配置图

nginx搭建前端项目web服务器以及利用反向代理调试远程后台接口

  配置很简单,这里大概给大家讲一下重点部分,

  1、location 支持配置项目的绝对路径

  2、假设我们的后台API地址是以API开头,location ^~ /api/ 代表nginx将会拦截请求地址中包含"/api/"字样的请求,

其实这就是我们的ajax请求路径,拦截到请求之后根据写法会分成两种情况把这个请求转发到 下面 proxy_pass 的地址上。

  举个例子:

  a、如上图,如果proxy_pass 的URL以 / 结尾 ,那么请求转发的时候 将 不会 带上 匹配到的 /api/ ,也就是说如果

  登录请求URL是localhost:60001/api/user/login,proxy_pass  URL 是 http://a.xx.com:8080/platform/,

  Nginx将会 把这个请求转发成 http://a.xx.com:8080/platform/user/login

  b、如果proxy_pass 的URL不以 / 结尾 ,那么请求转发的时候 将带上 匹配到的 /api/ ,也就是说如果

  登录请求 URL是localhost:60001/api/user/login,proxy_pass  URL 是 http://a.xx.com:8080/platform,

  Nginx将会 把这个请求转发成 http://a.xx.com:8080/platform/api/user/login

  3、一般我们登录之后服务器会通过Set-Cookie把token写回到我们本地,如果不设置 proxy_cookie_path 的话,

  服务器Set-Cookie命令会失效,本地存不了cookie,从而导致token丢失。

  这里proxy_cookie_path有一点需要注意的是 如果 proxy_pass  URL 是 http://a.xx.com:8080/platform/ 这种情况,

  proxy_cookie_path应该设置成 /platform/ / (注意两个斜杠之间有空格)。

  如果 proxy_pass  URL 是 http://a.xx.com:8080/这种情况  proxy_cookie_path应该设置成 / / (注意两个斜杠之间有空格)

  重启下nginx,你就会发现一切都正常了。