nginx接口反向代理配置介绍_网络技术_宿州市腾雀网络科技有限公司

nginx接口反向代理配置介绍

发布时间 - 2020-06-16 00:00:00 点击率：次

作为前端开发，每次调试接口，把代码发到测试服务器，是很费时费事的一件事情。
为了提高效率，想到了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;

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

相关栏目：【网站优化151355 】【网络推广146373 】【网络技术251813 】【 AI营销90571 】

上一篇：零克查词查单词准不准零克查词使用方法详解

下一篇：天猫超市卡过期怎么申请回来？天猫超市补卡入口不见了

相关栏目网站优化
网络推广
网络技术
AI营销

最新文章 Sublime怎么一键压缩JS代码 Su sublime如何在搜索中使用正则表达式 Sublime如何设置透明窗口效果 Su mysql如何设计商品表结构_mysql css属性背景图不显示怎么办_通过检查路如何使用Golang实现排序_Golan 农历闰月是怎么回事_为合回归年加一月调整塑造《刺客信条》艾吉奥传奇的编剧离开育碧 1英里等于多少公里 1mile和km的换 css grid布局中行和列是如何定义的 PS批量旋转和翻转图片，快速校正图片方向 C# Swagger UI自定义方法 C OPPO手机九宫格和全键盘怎么切换_OP Go语言如何实现用户登录注册_Golan 1节飞行速度多少公里每小时 1节是多少公纸嫁衣8千子树第五章庙门怎么开启庙门 Laravel 多行数据编辑表单中实现逐明日之后如何提升钓鱼等级明日之后提升钓支付宝怎样查年度账单_支付宝年度账单查看 C# 多线程UI更新Dispatcher

上一篇：零克查词查单词准不准零克查词使用方法详解

下一篇：天猫超市卡过期怎么申请回来？天猫超市补卡入口不见了