前端同学用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服务器以及利用反向代理调试远程后台接口的更多相关文章

  1. 使用 Nginx 搭建静态资源 web 服务器

    在搭建网站的时候,往往会加载很多的图片,如果都从 Tomcat 服务器来获取静态资源,这样会增加服务器的负载,使得服务器运行 速度非常慢,这时可以使用 Nginx 服务器来加载这些静态资源,这样就可以 ...

  2. nginx做rails项目web服务器缓存配置方法

    nginx作为Web服务器.或反向代理服务器都可以使用缓存 一.作为Web服务器 nginx可以通过 expires 指令来设置响应头的过期时间,实现浏览器缓存(Browser Caching),即浏 ...

  3. nginx利用反向代理调试后台接口

    1.location 支持配置项目的绝对路径 2.假设我们的后台API地址是以API开头,location ^~ /api/ 代表nginx将会拦截请求地址中包含"/api/"字样 ...

  4. [阿里云部署] Ubuntu+Flask+Nginx+uWSGI+Mysql搭建阿里云Web服务器

    部署地址:123.56.7.181 Ubuntu+Flask+Nginx+uWSGI+Mysql搭建阿里云Web服务器 这个标题就比之前的"ECS服务器配置Web环境的全过程及参考资料&qu ...

  5. Nginx+uWSGI+Django部署web服务器

    目录 Nginx+uWSGI+Django部署web服务器 环境说明 前言 搭建项目 Django部署 编辑luffy/luffy/settings.py 编辑luffy/app01/views.py ...

  6. 用go-module作为包管理器搭建go的web服务器

    本篇博客主要介绍了如何从零开始,使用Go Module作为依赖管理,基于Gin来一步一步搭建Go的Web服务器.并使用Endless来使服务器平滑重启,使用Swagger来自动生成Api文档. 源码在 ...

  7. Ubuntu 14.10下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具)

    Ubuntu 14.10下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具) 最近因为项目关系,收朋友之托,想制作秀场网站,但是因为之前一直没有涉及到这 ...

  8. 在docker中使用nginx部署前端项目

    前言 部署了三个nginx用于前端项目, 并使用keepalived部署好热备, 所以总共有5个nginx 创建好nginx的文件和配置 根据上面的指令创建好目录 mkdir /home/web/ng ...

  9. linux系统下搭建自己的web服务器

    之前在windows 2008 server上搭建了一个用于测试的web服务器,但是在打开网站的时候特别的慢,尤其是图片的加载都会失败,当时以为是路径的问题,但是在服务器上自己打开都特别慢,自己实在找 ...

随机推荐

  1. python读写xml文件

    python读取xml文件 xml文件是具有树状结构的,如果想要访问某个叶子结点,必须逐层获取其父结点,要读取某个叶子结点内容用text成员 使用前先加载xml工具包 try: import xml. ...

  2. [水煮 ASP.NET Web API2 方法论](12-4)OData 支持的 Function 和 Action

    问题 在 Web API 中使用 OData Function 和 Action. 解决方案 可以通过 ODataModelBuilder,使用 OData 构建 ASP.NET Web API, E ...

  3. CentOS7安装Pycharm后无法使用日常的快捷键

    1.在百度查了一圈,原来是vim在搞鬼 楼主在安装的时候,有另外添加了vim插件,所以ctrl +c之类的键都用不了,而且每次写py文件前都要先按insert键,真坑! 2.卸载pycharm里面的v ...

  4. vue-music 关于Player (播放器组件)--播放和进度条

    迷你播放器 1.播放器组件会在各个页面的情况下会打开. 首先在vuex state.js 中定义全局的播放器状态 import {playMode} from 'common/js/config.js ...

  5. 转:攻击JavaWeb应用[9]-Server篇[2]

    转:http://static.hx99.net/static/drops/papers-869.html 攻击JavaWeb应用[9]-Server篇[2] 园长 · 2014/01/22 12:5 ...

  6. 使用keras时出现 `pydot` failed to call GraphViz的解决办法

    问题来源于使用了 keras.utils.plot_model,报错内容为: 2018-08-29 08:58:21.937037: I tensorflow/core/platform/cpu_fe ...

  7. 洛谷——P1744 采购特价商品

    P1744 采购特价商品 题目背景 <爱与愁的故事第三弹·shopping>第一章. 题目描述 中山路店山店海,成了购物狂爱与愁大神的“不归之路”.中山路上有n(n<=100)家店, ...

  8. CSS3选择器、低版本解决方案及各浏览器私有前缀

    一.基本选择器 通配选择器:* 元素选择器:div.p… ID选择器:#id 类选择器:.className 群组选择器:选择器1,选择器2 主流浏览器全部支持 二.层次选择器 后代选择器: div ...

  9. vijos1889:天真的因数分解

    题目链接 vijos1889:天真的因数分解 题解 同bzoj2440: [中山市选2011]完全平方数 就是改成了求有平方因子数,依旧考虑二分,只是把容斥系数取一下相反数,也就是把莫比乌斯函数求一个 ...

  10. [ARC062F]Painting Graphs with AtCoDeer

    题意:一个无向图,用$k$种不同的颜色给每条边染色,问能染出多少种不同的图,如果两张图能通过循环移位环边使得颜色相同,那么这两张图被认为是相同的 数学太差伤不起啊...补了一下Burnside定理的证 ...