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

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

推荐教程：nginx教程

以上就是nginx接口反向代理配置介绍的详细内容，更多请关注24课堂在线网其它相关文章！