nginx搭建前端项目web服务器以及利用反向代理调试远程后台接口
前端同学用nginx搭建自己的web服务器,后台程序专门部署在一台服务器上(我们之前公司就有三套环境,开发/测试/生产),这样做的好处是
1、前端代码基本都是静态文件,重启一次很快,也就几秒钟时间。
2、不用配置后台语言开发环境,不需要关心后台代码是如何运行起来的,也不用管他究竟用了多少依赖包。
3、对网络环境不限制,无所谓是内网还是外网。
这样的想法是不错的,不过需要解决的一个问题是前端搭建了自己的静态服务器后,页面上发出的ajax请求如何回应?因为我们本地是没有真正的后台服务器接口的。所以我们要想办法利用nginx把请求转发到真正的远程后台服务器上,然后后台服务器返回数据给nginx,nginx收到数据后再返回给我们页面。这种技术一般成为请求转发或者叫反向代理。
(还有一种办法就是通过判断当location.href == localhost 时设置所有的API请求都用绝对路径,然后关闭浏览器的跨域检查。关闭跨域检查方式,右键chrome属性,在目标那里追加: --disable-web-security --user-data-dir=C:\tmp 注意是 追加!!!)
使用nginx搭建静态服务器这个不难,网上一大堆的教程,这里就不介绍了,难就难在如何请求转发。下面放出一张nginx的配置图

配置很简单,这里大概给大家讲一下重点部分,
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,你就会发现一切都正常了。
nginx搭建前端项目web服务器以及利用反向代理调试远程后台接口的更多相关文章
- 使用 Nginx 搭建静态资源 web 服务器
在搭建网站的时候,往往会加载很多的图片,如果都从 Tomcat 服务器来获取静态资源,这样会增加服务器的负载,使得服务器运行 速度非常慢,这时可以使用 Nginx 服务器来加载这些静态资源,这样就可以 ...
- nginx做rails项目web服务器缓存配置方法
nginx作为Web服务器.或反向代理服务器都可以使用缓存 一.作为Web服务器 nginx可以通过 expires 指令来设置响应头的过期时间,实现浏览器缓存(Browser Caching),即浏 ...
- nginx利用反向代理调试后台接口
1.location 支持配置项目的绝对路径 2.假设我们的后台API地址是以API开头,location ^~ /api/ 代表nginx将会拦截请求地址中包含"/api/"字样 ...
- [阿里云部署] Ubuntu+Flask+Nginx+uWSGI+Mysql搭建阿里云Web服务器
部署地址:123.56.7.181 Ubuntu+Flask+Nginx+uWSGI+Mysql搭建阿里云Web服务器 这个标题就比之前的"ECS服务器配置Web环境的全过程及参考资料&qu ...
- Nginx+uWSGI+Django部署web服务器
目录 Nginx+uWSGI+Django部署web服务器 环境说明 前言 搭建项目 Django部署 编辑luffy/luffy/settings.py 编辑luffy/app01/views.py ...
- 用go-module作为包管理器搭建go的web服务器
本篇博客主要介绍了如何从零开始,使用Go Module作为依赖管理,基于Gin来一步一步搭建Go的Web服务器.并使用Endless来使服务器平滑重启,使用Swagger来自动生成Api文档. 源码在 ...
- Ubuntu 14.10下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具)
Ubuntu 14.10下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具) 最近因为项目关系,收朋友之托,想制作秀场网站,但是因为之前一直没有涉及到这 ...
- 在docker中使用nginx部署前端项目
前言 部署了三个nginx用于前端项目, 并使用keepalived部署好热备, 所以总共有5个nginx 创建好nginx的文件和配置 根据上面的指令创建好目录 mkdir /home/web/ng ...
- linux系统下搭建自己的web服务器
之前在windows 2008 server上搭建了一个用于测试的web服务器,但是在打开网站的时候特别的慢,尤其是图片的加载都会失败,当时以为是路径的问题,但是在服务器上自己打开都特别慢,自己实在找 ...
随机推荐
- 转载--MyBaits中的#和$的区别
面试被问到了,百度了下,原文地址:mybatis中的#和$的区别 1. #将传入的数据都当成一个字符串,会对自动传入的数据加一个双引号.如:order by #user_id#,如果传入的值是111, ...
- Pow(x, n)——这也能用二分法!!!!
Implement pow(x, n). 下面介绍一下解决该问题的几种方法以及要注意的地方: 1)最直观容易想到的方法就是用递归方法求n个x的乘积,注意考虑n的正负号,时间复杂度为O(n) class ...
- NET牛人应该知道些什么?(瞬间觉得自己弱爆了)
任何一个使用.NET的人 描述线程与进程的区别? 什么是Windows服务,它的生命周期与标准的EXE程序有什么不同 Windows上的单个进程所能访问的最大内存量是多少?它与系统的最大虚拟内存一样吗 ...
- 前端读者 | 如何判断Javascript对象是否存在
本文来自@阮一峰 Javascript语言的设计不够严谨,很多地方一不小心就会出错. 举例来说,请考虑以下情况. 现在,我们要判断一个全局对象myObj是否存在,如果不存在,就对它进行声明.用自然语言 ...
- es6 map数据类型,要比set还很多
首先它支持多数据存储,具有增删查功能 set()设置 get()获取; has()查找; delete('obj')删除指定:clear()全部删除 size长度 let json={ name:&q ...
- 配合bootstrap实现的table 嵌套table
不要忘了引入bootstrap.css库 html部分 <div class="container"> <div class="row"> ...
- HDU 5861 Road(线段树 区间修改 单点查询)
Road Time Limit: 12000/6000 MS (Java/Others) Memory Limit: 65536/65536 K (Java/Others)Total Submi ...
- 倚天屠龙(一):妙用IDA Pro--利用IDAPython编写调试插件
一:前言 虽然静态分析有Radare2,Hopper这种新星之秀,动态调试有Ollydbg,Windbg这种老牌霸主,但是IDA Pro仍然是大部分二进制安全工程师最喜爱的工具,除了价格过于昂贵,基本 ...
- BZOJ 1475 方格取数(二分图最大点权独立集)
[题目链接] http://www.lydsy.com/JudgeOnline/problem.php?id=1475 [题目大意] 给出一个n*n的方格,从中取一些不相邻的数字,使得和最大 [题解] ...
- 【树链剖分】【dfs序】【LCA】【分类讨论】Codeforces Round #425 (Div. 2) D. Misha, Grisha and Underground
一棵树,q次询问,每次给你三个点a b c,让你把它们选做s f t,问你把s到f +1后,询问f到t的和,然后可能的最大值是多少. 最无脑的想法是链剖线段树……但是会TLE. LCT一样无脑,但是少 ...