一段萬(wàn)能的nginx接口反向代理配置

miqt 發(fā)布于2019-08-23 12:12 / 1681人閱讀

摘要：作為前端開(kāi)發(fā)，每次調(diào)試接口，把代碼發(fā)到測(cè)試服務(wù)器，是很費(fèi)時(shí)費(fèi)事的一件事情。為了提高效率，想到了反向代理來(lái)解決這一問(wèn)題。如何在手機(jī)上調(diào)試呢手機(jī)上不可能直接訪問(wèn)可以把手機(jī)和電腦連接到同一個(gè)網(wǎng)段，使用電腦的進(jìn)行訪問(wèn)。

作為前端開(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è)配置的話(huà)，可以用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("
");
    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)站接口了

GPU云服務(wù)器云服務(wù)器 nginx反向代理 nginx 反向代理cdn nginx反向代理https nginx反向代理nodejs

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://systransis.cn/yun/98105.html

發(fā)表評(píng)論

登陸后可評(píng)論

0條評(píng)論

miqt

男|高級(jí)講師

我要關(guān)注我要私信

TA的文章

linux 文件傳輸協(xié)議

閱讀 2439·2021-11-23 09:51
edgeNAT：雙11優(yōu)惠，全場(chǎng)VPS月付8折年付7折，韓國(guó)LG/美西洛杉磯/Cera VPS實(shí)付4

閱讀 2471·2021-11-11 17:21
為什么說(shuō)超快恢復(fù)二極管MURF1040CT-ASEMI比普通二極管好

閱讀 3112·2021-09-04 16:45
Swiftnode：美國(guó)大帶寬不限流量高防服務(wù)器/Xeon E3-1230v5/32GB DDR4/

閱讀 2397·2021-08-09 13:42
css-元素居中

閱讀 2230·2019-08-29 18:39
CSS效果篇--純CSS+HTML實(shí)現(xiàn)checkbox的思路與實(shí)例

閱讀 2898·2019-08-29 14:12
footer保持在頁(yè)面底部的兩種方法

閱讀 1299·2019-08-29 13:49
通過(guò)案例理解position:relative和position:absolute

閱讀 3373·2019-08-29 11:17

成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專(zhuān)欄INFORMATION COLUMN

上云采購(gòu)季！| 2核2G4M爆款云服務(wù)器低至59元/年，更有多臺(tái)、長(zhǎng)期優(yōu)惠，快來(lái)選購(gòu)！

一段萬(wàn)能的nginx接口反向代理配置

相關(guān)文章