|
|
51CTO旗下网站
|
|
移动端

一段万能的Nginx接口实现反向代理配置值得收藏!

代理服务器,客户机在发送请求时,不会直接发送给目的主机,而是先发送给代理服务器,代理服务接受客户机请求之后,再向主机发出,并接收目的主机返回的数据,存放在代理服务器的硬盘中,再发送给客户机。

作者:智能运维小讲堂来源:今日头条|2019-05-25 14:35

【大咖·来了 第7期】10月24日晚8点观看《智能导购对话机器人实践》

 什么是代理服务器

代理服务器,客户机在发送请求时,不会直接发送给目的主机,而是先发送给代理服务器,代理服务接受客户机请求之后,再向主机发出,并接收目的主机返回的数据,存放在代理服务器的硬盘中,再发送给客户机。

为什么要使用代理服务器

1)提高访问速度

由于目标主机返回的数据会存放在代理服务器的硬盘中,因此下一次客户再访问相同的站点数据时,会直接从代理服务器的硬盘中读取,起到了缓存的作用,尤其对于热门站点能明显提高请求速度。

2)防火墙作用

由于所有的客户机请求都必须通过代理服务器访问远程站点,因此可在代理服务器上设限,过滤某些不安全信息。

3)通过代理服务器访问不能访问的目标站点

互联网上有许多开发的代理服务器,客户机在访问受限时,可通过不受限的代理服务器访问目标站点,通俗说,我们使用的翻墙浏览器就是利用了代理服务器,虽然不能出国,但也可直接访问外网。

反向代理 VS 正向代理

1、什么是正向代理?什么是反向代理?

正向代理,架设在客户机与目标主机之间,只用于代理内部网络对Internet的连接请求,客户机必须指定代理服务器,并将本来要直接发送到Web服务器上的http请求发送到代理服务器中。

反向代理服务器架设在服务器端,通过缓冲经常被请求的页面来缓解服务器的工作量,将客户机请求转发给内部网络上的目标服务器;并将从服务器上得到的结果返回给Internet上请求连接的客户端,此时代理服务器与目标主机一起对外表现为一个服务器。

2、反向代理有哪些主要应用?

现在许多大型web网站都用到反向代理。除了可以防止外网对内网服务器的恶性攻击、缓存以减少服务器的压力和访问安全控制之外,还可以进行负载均衡,将用户请求分配给多个服务器。

作为前端开发,每次调试接口,把代码发到测试服务器,是很费时费事的一件事情。

为了提高效率,想到了nginx反向代理来解决这一问题。

接口地址:

  1. test.com 

访问地址:

  1. localhost 

最核心的问题就是,登录时,无法写入cookie的问题,为了解决这个问题,走了不少弯路。

  1. worker_processes 1; 
  2. events { 
  3.  worker_connections 1024; 
  4. http { 
  5.  include mime.types; 
  6.  default_type application/octet-stream; 
  7.  sendfile on
  8.  keepalive_timeout 10; 
  9.  server { 
  10.  listen 80; 
  11.  server_name localhost; 
  12.   
  13.  location =/ { 
  14.  add_header X-Frame-Options SAMEORIGIN; 
  15.  root D:/workspace/; 
  16.  index index.html; 
  17.  } 
  18.   
  19.  location ~* .(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ { 
  20.  charset utf-8; 
  21.  root D:/workspace/; 
  22.  expires 3d; 
  23.  } 
  24.   
  25.  location = /socket/v2 { 
  26.  proxy_pass http://test.com; 
  27.  proxy_redirect off
  28.  proxy_http_version 1.1; 
  29.  proxy_set_header Upgrade $http_upgrade; 
  30.  proxy_set_header Connection "upgrade"
  31.  proxy_set_header Host test.com; 
  32.  proxy_set_header X-Real-IP $remote_addr; 
  33.  proxy_set_header REMOTE-HOST $remote_addr; 
  34.  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  35.  proxy_connect_timeout 30; 
  36.  proxy_send_timeout 30; 
  37.  proxy_read_timeout 60; 
  38.  proxy_buffer_size 256k; 
  39.  proxy_buffers 4 256k; 
  40.  } 
  41.   
  42.  location / { 
  43.  proxy_pass http://test.com; 
  44.  proxy_set_header Cookie $http_cookie; 
  45.  proxy_cookie_domain test.com localhost; 
  46.  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  47.  proxy_set_header Host test.com; 
  48.  proxy_set_header X-Real-IP $remote_addr; 
  49.  proxy_set_header REMOTE-HOST $remote_addr; 
  50.  } 
  51.  } 

核心代码在三行代码上:

一段万能的nginx接口实现反向代理配置(推荐)值得收藏!

具体解释我也是一知半解:

  • 第一个是携带cookie,
  • 第二个设置cookie 的 domain
  • 第三个 设置真实的host

重要提示:以上3个的顺序不要颠倒,否则代理失败,我也不知道为什么。

如何在手机上调试呢?

手机上不可能直接访问localhost,可以把手机和电脑连接到同一个网段,使用电脑的ip进行访问。

但是这里只代理了localhost,并没有代理电脑的ip

所以,需要把是上面的server{...}拷贝一份,只需要把里面的localhost全部改成你的电脑ip就可以了,最终代码:

  1. worker_processes 1; 
  2. events { 
  3.  worker_connections 1024; 
  4. http { 
  5.  include mime.types; 
  6.  default_type application/octet-stream; 
  7.  sendfile on
  8.  keepalive_timeout 10; 
  9.  server { 
  10.  listen 80; 
  11.  server_name localhost; 
  12.   
  13.  location =/ { 
  14.  add_header X-Frame-Options SAMEORIGIN; 
  15.  root D:/workspace/; 
  16.  index index.html; 
  17.  } 
  18.   
  19.  location ~* .(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ { 
  20.  charset utf-8; 
  21.  root D:/workspace/; 
  22.  expires 3d; 
  23.  } 
  24.   
  25.  location = /socket/v2 { 
  26.  proxy_pass http://test.com; 
  27.  proxy_redirect off
  28.  proxy_http_version 1.1; 
  29.  proxy_set_header Upgrade $http_upgrade; 
  30.  proxy_set_header Connection "upgrade"
  31.  proxy_set_header Host test.com; 
  32.  proxy_set_header X-Real-IP $remote_addr; 
  33.  proxy_set_header REMOTE-HOST $remote_addr; 
  34.  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  35.  proxy_connect_timeout 30; 
  36.  proxy_send_timeout 30; 
  37.  proxy_read_timeout 60; 
  38.  proxy_buffer_size 256k; 
  39.  proxy_buffers 4 256k; 
  40.  } 
  41.   
  42.  location / { 
  43.  proxy_pass http://test.com; 
  44.  proxy_set_header Cookie $http_cookie; 
  45.  proxy_cookie_domain test.com localhost; 
  46.  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  47.  proxy_set_header Host test.com; 
  48.  proxy_set_header X-Real-IP $remote_addr; 
  49.  proxy_set_header REMOTE-HOST $remote_addr; 
  50.  } 
  51.  } 
  52.  server { 
  53.  listen 8080; 
  54.  server_name xx.xx.xx.xx; 
  55.   
  56.  location =/ { 
  57.  add_header X-Frame-Options SAMEORIGIN; 
  58.  root D:/workspace/; 
  59.  index index.html; 
  60.  } 
  61.   
  62.  location ~* .(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ { 
  63.  charset utf-8; 
  64.  root D:/workspace/; 
  65.  expires 3d; 
  66.  } 
  67.   
  68.  location = /socket/v2 { 
  69.  proxy_pass http://test.com; 
  70.  proxy_redirect off
  71.  proxy_http_version 1.1; 
  72.  proxy_set_header Upgrade $http_upgrade; 
  73.  proxy_set_header Connection "upgrade"
  74.  proxy_set_header Host test.com; 
  75.  proxy_set_header X-Real-IP $remote_addr; 
  76.  proxy_set_header REMOTE-HOST $remote_addr; 
  77.  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  78.  proxy_connect_timeout 30; 
  79.  proxy_send_timeout 30; 
  80.  proxy_read_timeout 60; 
  81.  proxy_buffer_size 256k; 
  82.  proxy_buffers 4 256k; 
  83.  } 
  84.   
  85.  location / { 
  86.  proxy_pass http://test.com; 
  87.  proxy_set_header Cookie $http_cookie; 
  88.  proxy_cookie_domain test.com xx.xx.xx.xx; 
  89.  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  90.  proxy_set_header Host test.com; 
  91.  proxy_set_header X-Real-IP $remote_addr; 
  92.  proxy_set_header REMOTE-HOST $remote_addr; 
  93.  } 
  94.  } 

访问方法:http://xx.xx.xx.xx:8080 即可

如果是打包工具生成增这个配置的话,可以用nodejs动态获取你电脑的ip

  1. function getIPAdress() {  
  2.  var interfaces = require('os').networkInterfaces();  
  3.  for (var devName in interfaces) {  
  4.  var iface = interfaces[devName];  
  5.  for (var i = 0; i < iface.length; i++) {  
  6.  var alias = iface[i];  
  7.  if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {  
  8.  return alias.address; 
  9.  }  
  10.  }  
  11.  }  

所以,这里贴出来一个动态生成nginx.config的工具

  1. function buildNginxConfig(config) { 
  2.   
  3.  function getIPAdress() {  
  4.  var interfaces = require('os').networkInterfaces();  
  5.  for (var devName in interfaces) {  
  6.  var iface = interfaces[devName];  
  7.  for (var i = 0; i < iface.length; i++) {  
  8.  var alias = iface[i];  
  9.  if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {  
  10.  return alias.address;  
  11.  }  
  12.  }  
  13.  }  
  14.  } 
  15.  var cwd = process.cwd().replace(/\/g, '/') + '/app'
  16.  var protocol = /https|443/.test(config.ip) ? 'https' : 'http'
  17.   
  18.  var servers = [{ 
  19.  browserIp: 'localhost'
  20.  port: 80, 
  21.  root: cwd, 
  22.  serverIp: config.ip, 
  23.  protocol: protocol, 
  24.  }, { 
  25.  browserIp: getIPAdress(), 
  26.  port: 8080, 
  27.  root: cwd, 
  28.  serverIp: config.ip, 
  29.  protocol: protocol, 
  30.  }].map(function(item) { 
  31.  return ` 
  32.  server { 
  33.  listen ${item.port}; 
  34.  server_name ${item.browserIp}; 
  35.   
  36.  location =/ { 
  37.  add_header X-Frame-Options SAMEORIGIN; 
  38.  root ${item.root}; 
  39.  index index.html; 
  40.  } 
  41.   
  42.  location ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ { 
  43.  charset utf-8; 
  44.  root ${item.root}; 
  45.  expires 3d; 
  46.  } 
  47.   
  48.  location = /socket/v2 { 
  49.  proxy_pass ${item.protocol}://${item.serverIp}; 
  50.  proxy_redirect off
  51.  proxy_http_version 1.1; 
  52.  proxy_set_header Upgrade $http_upgrade; 
  53.  proxy_set_header Connection "upgrade"
  54.  proxy_set_header Host ${item.serverIp}; 
  55.  proxy_set_header X-Real-IP $remote_addr; 
  56.  proxy_set_header REMOTE-HOST $remote_addr; 
  57.  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  58.  proxy_connect_timeout 30; 
  59.  proxy_send_timeout 30; 
  60.  proxy_read_timeout 60; 
  61.  proxy_buffer_size 256k; 
  62.  proxy_buffers 4 256k; 
  63.  } 
  64.   
  65.  location / { 
  66.  proxy_pass ${item.protocol}://${item.serverIp}; 
  67.  proxy_set_header Cookie $http_cookie; 
  68.  proxy_cookie_domain ${item.serverIp} ${item.browserIp}; 
  69.  proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for; 
  70.  proxy_set_header Host ${item.serverIp}; 
  71.  proxy_set_header X-Real-IP $remote_addr; 
  72.  proxy_set_header REMOTE-HOST $remote_addr; 
  73.  } 
  74.  }`; 
  75.  }).join(' 
  76. '); 
  77.  var str = `worker_processes 1; 
  78. events { 
  79.  worker_connections 1024; 
  80. http { 
  81.  include mime.types; 
  82.  default_type application/octet-stream; 
  83.  sendfile on
  84.  keepalive_timeout 10; 
  85.  ${servers} 
  86. }`; 
  87.   
  88.  return str; 
  89.   
  90. exports = module.exports = buildNginxConfig; 

有了这个万能反向代理,可以随心所欲的玩转任何网站接口了。

【编辑推荐】

  1. 一文看懂Web服务器、应用服务器、Web容器、反向代理服务器
  2. Netcraft 4月Web服务器排名:Nginx首度登上第一宝座
  3. Nginx成为4月市占率最高的Web服务器
  4. 懂点 Nginx 反向代理与负载均衡,是面试加分项没有之一
  5. Nginx+Tomcat会话保持N种方案,各有千秋!你选择对了吗?
【责任编辑:武晓燕 TEL:(010)68476606】


点赞 0
分享:
大家都在看
猜你喜欢

订阅专栏+更多

Spring Boot 爬虫搜索轻松游

Spring Boot 爬虫搜索轻松游

全栈式开发之旅
共4章 | 美码师

75人订阅学习

Linux性能调优攻略

Linux性能调优攻略

性能调优规范
共15章 | 南非蚂蚁

206人订阅学习

VMware vSphere虚拟化常见故障

VMware vSphere虚拟化常见故障

搞定vSphere虚拟化
共18章 | 王春海

84人订阅学习

读 书 +更多

Wicked Cool Java中文版

本书主要介绍由Sun微系统公司创建的Java编程语言。 除了核心内容外,Java还有许多免费的财富,即开放源代码的库。本书就是为了介绍这些库...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊

51CTO服务号

51CTO播客