快捷導(dǎo)航

一段萬(wàn)能的nginx接口實(shí)現(xiàn)反向代理配置

更新時(shí)間：2025年09月18日 17:25:13 作者：jsoncode

這篇文章主要介紹了一段萬(wàn)能的nginx接口實(shí)現(xiàn)反向代理配置，詳細(xì)的介紹了什么是反向代理及其接口反向代理的實(shí)現(xiàn)，非常具有實(shí)用價(jià)值，需要的朋友可以參考下

1、什么是代理服務(wù)器

代理服務(wù)器，客戶機(jī)在發(fā)送請(qǐng)求時(shí)，不會(huì)直接發(fā)送給目的主機(jī)，而是先發(fā)送給代理服務(wù)器，代理服務(wù)接受客戶機(jī)請(qǐng)求之后，再向主機(jī)發(fā)出，并接收目的主機(jī)返回的數(shù)據(jù)，存放在代理服務(wù)器的硬盤(pán)中，再發(fā)送給客戶機(jī)。

2、為什么要使用代理服務(wù)器

1）提高訪問(wèn)速度

由于目標(biāo)主機(jī)返回的數(shù)據(jù)會(huì)存放在代理服務(wù)器的硬盤(pán)中，因此下一次客戶再訪問(wèn)相同的站點(diǎn)數(shù)據(jù)時(shí)，會(huì)直接從代理服務(wù)器的硬盤(pán)中讀取，起到了緩存的作用，尤其對(duì)于熱門(mén)站點(diǎn)能明顯提高請(qǐng)求速度。

2）防火墻作用

由于所有的客戶機(jī)請(qǐng)求都必須通過(guò)代理服務(wù)器訪問(wèn)遠(yuǎn)程站點(diǎn)，因此可在代理服務(wù)器上設(shè)限，過(guò)濾某些不安全信息。

3）通過(guò)代理服務(wù)器訪問(wèn)不能訪問(wèn)的目標(biāo)站點(diǎn)

反向代理 VS 正向代理

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

正向代理，架設(shè)在客戶機(jī)與目標(biāo)主機(jī)之間，只用于代理內(nèi)部網(wǎng)絡(luò)對(duì)Internet的連接請(qǐng)求，客戶機(jī)必須指定代理服務(wù)器,并將本來(lái)要直接發(fā)送到Web服務(wù)器上的http請(qǐng)求發(fā)送到代理服務(wù)器中。

反向代理服務(wù)器架設(shè)在服務(wù)器端，通過(guò)緩沖經(jīng)常被請(qǐng)求的頁(yè)面來(lái)緩解服務(wù)器的工作量，將客戶機(jī)請(qǐng)求轉(zhuǎn)發(fā)給內(nèi)部網(wǎng)絡(luò)上的目標(biāo)服務(wù)器；并將從服務(wù)器上得到的結(jié)果返回給Internet上請(qǐng)求連接的客戶端，此時(shí)代理服務(wù)器與目標(biāo)主機(jī)一起對(duì)外表現(xiàn)為一個(gè)服務(wù)器。

2、反向代理有哪些主要應(yīng)用？

現(xiàn)在許多大型web網(wǎng)站都用到反向代理。除了可以防止外網(wǎng)對(duì)內(nèi)網(wǎng)服務(wù)器的惡性攻擊、緩存以減少服務(wù)器的壓力和訪問(wèn)安全控制之外，還可以進(jìn)行負(fù)載均衡，將用戶請(qǐng)求分配給多個(gè)服務(wù)器。

作為前端開(kāi)發(fā)，每次調(diào)試接口，把代碼發(fā)到測(cè)試服務(wù)器，是很費(fèi)時(shí)費(fèi)事的一件事情。

為了提高效率，想到了nginx反向代理來(lái)解決這一問(wèn)題。

接口地址：
test.com

訪問(wèn)地址：
localhost

最核心的問(wèn)題就是，登錄時(shí)，無(wú)法寫(xiě)入cookie的問(wèn)題，為了解決這個(gè)問(wèn)題，走了不少?gòu)澛贰?/p>

worker_processes 1;
events {
  worker_connections 1024;
}
http {
  include    mime.types;
  default_type application/octet-stream;
  sendfile   on;
  keepalive_timeout 10;
  server {
    listen 80;
    server_name localhost;
    
    location =/ {
      add_header X-Frame-Options SAMEORIGIN;
      root    D:/workspace/;
      index index.html;
    }

    location ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
      charset   utf-8;
      root    D:/workspace/;
      expires   3d;
    }
    
    location = /socket/v2 {
      proxy_pass  http://test.com;
      proxy_redirect off;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host test.com;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_connect_timeout 30;
      proxy_send_timeout 30;
      proxy_read_timeout 60;
      proxy_buffer_size 256k;
      proxy_buffers 4 256k;
    }
    
    location / {
      proxy_pass  http://test.com;
      proxy_set_header Cookie $http_cookie;
      proxy_cookie_domain test.com localhost;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host test.com;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header REMOTE-HOST $remote_addr;
    }
  }
}

核心代碼在三行代碼上：

proxy_set_header Cookie $http_cookie;
proxy_cookie_domain test.com localhost;
proxy_set_header Host test.com;

具體解釋我也是一知半解：

第一個(gè)是攜帶cookie，
第二個(gè)設(shè)置cookie 的 domain
第三個(gè) 設(shè)置真實(shí)的host

重要提示：以上3個(gè)的順序不要顛倒，否則代理失敗，我也不知道為什么。

如何在手機(jī)上調(diào)試呢？

手機(jī)上不可能直接訪問(wèn)localhost,可以把手機(jī)和電腦連接到同一個(gè)網(wǎng)段，使用電腦的ip進(jìn)行訪問(wèn)。
但是這里只代理了localhost,并沒(méi)有代理電腦的ip

所以，需要把是上面的server{...}拷貝一份，只需要把里面的localhost全部改成你的電腦ip就可以了，最終代碼：

worker_processes 1;
events {
  worker_connections 1024;
}
http {
  include    mime.types;
  default_type application/octet-stream;
  sendfile   on;
  keepalive_timeout 10;
  server {
    listen 80;
    server_name localhost;
    
    location =/ {
      add_header X-Frame-Options SAMEORIGIN;
      root    D:/workspace/;
      index index.html;
    }

    location ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
      charset   utf-8;
      root    D:/workspace/;
      expires   3d;
    }
    
    location = /socket/v2 {
      proxy_pass  http://test.com;
      proxy_redirect off;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host test.com;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_connect_timeout 30;
      proxy_send_timeout 30;
      proxy_read_timeout 60;
      proxy_buffer_size 256k;
      proxy_buffers 4 256k;
    }
    
    location / {
      proxy_pass  http://test.com;
      proxy_set_header Cookie $http_cookie;
      proxy_cookie_domain test.com localhost;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host test.com;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header REMOTE-HOST $remote_addr;
    }
  }
  server {
    listen 8080;
    server_name xx.xx.xx.xx;
    
    location =/ {
      add_header X-Frame-Options SAMEORIGIN;
      root    D:/workspace/;
      index index.html;
    }

    location ~* \.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
      charset   utf-8;
      root    D:/workspace/;
      expires   3d;
    }
    
    location = /socket/v2 {
      proxy_pass  http://test.com;
      proxy_redirect off;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host test.com;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_connect_timeout 30;
      proxy_send_timeout 30;
      proxy_read_timeout 60;
      proxy_buffer_size 256k;
      proxy_buffers 4 256k;
    }
    
    location / {
      proxy_pass  http://test.com;
      proxy_set_header Cookie $http_cookie;
      proxy_cookie_domain test.com xx.xx.xx.xx;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host test.com;
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header REMOTE-HOST $remote_addr;
    }
  }
}

訪問(wèn)方法：http://xx.xx.xx.xx:8080 即可

如果是打包工具生成增這個(gè)配置的話，可以用nodejs動(dòng)態(tài)獲取你電腦的ip

function getIPAdress() {   
  var interfaces = require('os').networkInterfaces();   
  for (var devName in interfaces) {      
    var iface = interfaces[devName];      
    for (var i = 0; i < iface.length; i++) {         
      var alias = iface[i];         
      if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {            
        return alias.address;
      }      
    }   
  } 
}

所以，這里貼出來(lái)一個(gè)動(dòng)態(tài)生成nginx.config的工具

function buildNginxConfig(config) {

  function getIPAdress() {   
    var interfaces = require('os').networkInterfaces();   
    for (var devName in interfaces) {      
      var iface = interfaces[devName];      
      for (var i = 0; i < iface.length; i++) {         
        var alias = iface[i];         
        if (alias.family === 'IPv4' && alias.address !== '127.0.0.1' && !alias.internal) {            
          return alias.address;         
        }      
      }   
    } 
  }
  var cwd = process.cwd().replace(/\\/g, '/') + '/app';
  var protocol = /https|443/.test(config.ip) ? 'https' : 'http';

  var servers = [{
    browserIp: 'localhost',
    port: 80,
    root: cwd,
    serverIp: config.ip,
    protocol: protocol,
  }, {
    browserIp: getIPAdress(),
    port: 8080,
    root: cwd,
    serverIp: config.ip,
    protocol: protocol,
  }].map(function(item) {
    return `
  server {
    listen ${item.port};
    server_name ${item.browserIp};
    
    location =/ {
      add_header X-Frame-Options SAMEORIGIN;
      root    ${item.root};
      index index.html;
    }

    location ~* \\.(html|htm|gif|jpg|jpeg|bmp|png|ico|txt|js|css|swf|woff|woff2|ttf|json|svg|cur|vue|otf|eot)$ {
      charset   utf-8;
      root    ${item.root};
      expires   3d;
    }
    
    location = /socket/v2 {
      proxy_pass  ${item.protocol}://${item.serverIp};
      proxy_redirect off;
      proxy_http_version 1.1;
      proxy_set_header Upgrade $http_upgrade;
      proxy_set_header Connection "upgrade";
      proxy_set_header Host ${item.serverIp};
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header REMOTE-HOST $remote_addr;
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_connect_timeout 30;
      proxy_send_timeout 30;
      proxy_read_timeout 60;
      proxy_buffer_size 256k;
      proxy_buffers 4 256k;
    }
    
    location / {
      proxy_pass  ${item.protocol}://${item.serverIp};
      proxy_set_header Cookie $http_cookie;
      proxy_cookie_domain ${item.serverIp} ${item.browserIp};
      proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
      proxy_set_header Host ${item.serverIp};
      proxy_set_header X-Real-IP $remote_addr;
      proxy_set_header REMOTE-HOST $remote_addr;
    }
  }`;
  }).join('\n');
  var str = `worker_processes 1;
events {
  worker_connections 1024;
}
http {
  include    mime.types;
  default_type application/octet-stream;
  sendfile   on;
  keepalive_timeout 10;
  ${servers}
}`;

  return str;
}

exports = module.exports = buildNginxConfig;

有了這個(gè)萬(wàn)能反向代理，可以隨心所欲的玩轉(zhuǎn)任何網(wǎng)站接口了

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: