社区
学习
工具库
AI工具
休闲
搜索
简体中文
首页 运维 nginx nginx接口反向代理配置介绍

nginx接口反向代理配置介绍

青灯夜游
青灯夜游
Jun 16, 2020 am 09:10 AM
nginx

nginx接口反向代理配置介绍

作为前端开发，每次调试接口，把代码发到测试服务器，是很费时费事的一件事情。
为了提高效率，想到了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  ===  &#39;IPv4&#39;  &&  alias.address  !==  &#39;127.0.0.1&#39;  &&  !alias.internal) {                       
                return  alias.address;
            }            
        }      
    }  
}
登录后复制

所以，这里贴出来一个动态生成nginx.config的工具

function buildNginxConfig(config) {
    function  getIPAdress() {      
        var  interfaces  =  require(&#39;os&#39;).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  ===  &#39;IPv4&#39;  &&  alias.address  !==  &#39;127.0.0.1&#39;  &&  !alias.internal) {                       
                    return  alias.address;                 
                }            
            }      
        }  
    }
    var cwd = process.cwd().replace(/\\/g, &#39;/&#39;) + &#39;/app&#39;;
    var protocol = /https|443/.test(config.ip) ? &#39;https&#39; : &#39;http&#39;;
    var servers = [{
        browserIp: &#39;localhost&#39;,
        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(&#39;\n&#39;);
    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接口反向代理配置介绍的详细内容。更多信息请关注PHP中文网其他相关文章！

本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序，用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

AI Hentai Generator

AI Hentai Generator

免费生成ai无尽的。

显示更多

热门文章

刺客信条阴影：贝壳谜语解决方案
3 周前 By DDD
Windows 11 KB5054979中的新功能以及如何解决更新问题
2 周前 By DDD
在哪里可以找到原子中的起重机控制钥匙卡
3 周前 By DDD
节省R.E.P.O.解释（并保存文件）
1 个月前 By 尊渡假赌尊渡假赌尊渡假赌
刺客信条阴影 - 如何找到铁匠，解锁武器和装甲定制
4 周前 By DDD
显示更多

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版，非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

显示更多

热门话题

gmail邮箱登陆入口在哪里
7569
15
CakePHP 教程
1386
52
steam的账户名称是什么格式
87
11
win11激活密钥永久
61
19
NYT连接提示和答案
28
107
显示更多
Related knowledge
nginx怎么配置云服务器域名 nginx怎么配置云服务器域名 Apr 14, 2025 pm 12:18 PM

在云服务器上配置 Nginx 域名的方法：创建 A 记录，指向云服务器的公共 IP 地址。在 Nginx 配置文件中添加虚拟主机块，指定侦听端口、域名和网站根目录。重启 Nginx 以应用更改。访问域名测试配置。其他注意事项：安装 SSL 证书启用 HTTPS、确保防火墙允许 80 端口流量、等待 DNS 解析生效。

怎么查看nginx是否启动 怎么查看nginx是否启动 Apr 14, 2025 pm 01:03 PM

确认 Nginx 是否启动的方法：1. 使用命令行：systemctl status nginx（Linux/Unix）、netstat -ano | findstr 80（Windows）；2. 检查端口 80 是否开放；3. 查看系统日志中 Nginx 启动消息；4. 使用第三方工具，如 Nagios、Zabbix、Icinga。

docker怎么创建镜像 docker怎么创建镜像 Apr 15, 2025 am 11:27 AM

创建 Docker 镜像步骤：编写包含构建指令的 Dockerfile。在终端中构建镜像，使用 docker build 命令。标记镜像，使用 docker tag 命令分配名称和标签。

nginx怎么查版本 nginx怎么查版本 Apr 14, 2025 am 11:57 AM

可以查询 Nginx 版本的方法有：使用 nginx -v 命令；查看 nginx.conf 文件中的 version 指令；打开 Nginx 错误页，查看页面的标题。

怎么启动nginx服务器 怎么启动nginx服务器 Apr 14, 2025 pm 12:27 PM

启动 Nginx 服务器需要按照不同操作系统采取不同的步骤：Linux/Unix 系统：安装 Nginx 软件包（例如使用 apt-get 或 yum）。使用 systemctl 启动 Nginx 服务（例如 sudo systemctl start nginx）。Windows 系统：下载并安装 Windows 二进制文件。使用 nginx.exe 可执行文件启动 Nginx（例如 nginx.exe -c conf\nginx.conf）。无论使用哪种操作系统，您都可以通过访问服务器 IP

linux怎么查看nginx是否启动 linux怎么查看nginx是否启动 Apr 14, 2025 pm 12:48 PM

在 Linux 中，使用以下命令检查 Nginx 是否已启动：systemctl status nginx根据命令输出进行判断：如果显示 "Active: active (running)"，则 Nginx 已启动。如果显示 "Active: inactive (dead)"，则 Nginx 已停止。

linux怎么启动nginx linux怎么启动nginx Apr 14, 2025 pm 12:51 PM

在 Linux 中启动 Nginx 的步骤：检查 Nginx 是否已安装。使用 systemctl start nginx 启动 Nginx 服务。使用 systemctl enable nginx 启用在系统启动时自动启动 Nginx。使用 systemctl status nginx 验证启动是否成功。在 Web 浏览器中访问 http://localhost 查看默认欢迎页面。

nginx403怎么解决 nginx403怎么解决 Apr 14, 2025 am 10:33 AM

如何解决 Nginx 403 Forbidden 错误？检查文件或目录权限；2. 检查 .htaccess 文件；3. 检查 Nginx 配置文件；4. 重启 Nginx。其他可能原因还包括防火墙规则、SELinux 设置或应用程序问题。

See all articles