一段萬能的nginx接口反向代理配置

nginx javascript

更新於 2018-09-30   約 19 分鍾

作為前端開發，每次調試接口，把代碼發到測試服務器，是很費時費事的一件事情。
為了提高效率，想到了nginx反向代理來解決這一問題。

接口地址：
test.com

訪問地址：
localhost

最核心的問題就是，登錄時，無法寫入cookie的問題，為了解決這個問題，走了不少彎路。

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;

具體解釋我也是一知半解：
第一個是攜帶cookie，
第二個設置cookie 的 domain
第三個 設置真實的host

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

如何在手機上調試呢？

手機上不可能直接訪問localhost,可以把手機和電腦連接到同一個網段，使用電腦的ip進行訪問。
但是這里只代理了localhost,並沒有代理電腦的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; } } }

訪問方法：

http://xx.xx.xx.xx:8080 即可

如果是打包工具生成增這個配置的話，可以用nodejs動態獲取你電腦的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; }             }       }   }

所以，這里貼出來一個動態生成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;

有了這個萬能反向代理，可以隨心所欲的玩轉任何網站接口了