使用 nginx 实现在同一个微信公众号授权域名下访问正式版和测试版

时间：2022-07-05 10:55:05 来源：作者：buyi3013

微信公众号开发过程中必须要在公众号后台设置网页授权域名、JS接口域名和业务域名。比如：h5.juejin.cn。

微信的匹配规则是完全匹配，比如： test.h5.juejin.cn 是不会通过的。

下面使用 Nginx 反向代理实现同一个域名既可以访问正式版，也可以访问测试版。

nginx 配置

server {
    listen       80;
    server_name  h5.juejin.cn;
    
    ### 判断是否跳转到确认页面    开始 start      ========
    set $condiction 'noReferer';
    if ($http_referer){
        set $condiction '';
    }
    ## 打开微信聊天记录中的链接时，微信会先显示一个外链提示页面，点击 继续访问 才能打开网页。此时 Referer = https://weixin110.qq.com/。
    if ($http_referer = "https://weixin110.qq.com/") {
        set $condiction 'noReferer';
    }
    ## 忽略掉访问 /dev-tool 开头的请求
    if ($uri ~* "dev-tool(.*)") {
        set $condiction "$condiction ignoreUri";
    }
    if ($http_cookie ~* "env=(.+?)(?=;|$)") {
        #### cookie 中包含“测试环境”标识
        set $condiction '$condiction isTest';
    }
    if ($http_cookie ~* "ignoreConfirm=(.+?)(?=;|$)") {
        ####  cookie 中包含“首次访问测试环境忽略提示页面”标识
        set $condiction '$condiction ignoreConfirm';
    }
    if ($condiction = 'noReferer isTest') {
        #### 满足条件1(打开网页)、 条件2(测试环境)时跳转到提示页面
        rewrite ^/(.*) /dev-tool?redirect=$request_uri redirect;
    }
    #### 判断是否跳转到确认页面    结束 end      ========

    location / {
        #### 清除 cookie 中的“首次访问测试环境忽略提示页面”标识
        add_header Set-Cookie 'ignoreConfirm=true;expires=Thu, 09 Dec 1970 06:05:42 GMT;path=/';
        #### 判断是否使用测试版   开始 start      ========
        if ($http_cookie ~* "env=(.+?)(?=;|$)") {
            # proxy_pass http://localhost:7001;
            proxy_pass http://localhost:11000;
        }
        #### 判断是否使用测试版    结束 end      ========

        root h5;
        try_files $uri $uri/ /index.html;

        add_header Cache-Control no-store;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

        # proxy_set_header Host $host:7001;
        ####        微信H5支付 获取用户端ip用   结束 start      ========
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Real-Port $remote_port;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        ####        微信H5支付 获取用户端ip用   结束 end      ========
    }

    location /dev-tool {
        root dev-tool;
        index index.html index.htm;
    }

    location = /test {
        ### 访问测试环境，使用cookie标识访问的是测试环境；cookie过期时间设置为1000年；
        add_header Set-Cookie 'env=test333;expires=Thu, 09 Dec 3021 06:05:42 GMT;path=/';
        ### 首次开启测试环境时增加“忽略提示页面”标识
        add_header Set-Cookie 'ignoreConfirm=true;expires=Thu, 09 Dec 3021 06:05:42 GMT;path=/';
        rewrite ^/(.*) / redirect;
    }
}

nginx 文件目录：

dev-tool 文件夹目录结构：

注意在根目录 dev-tool 中还有文件夹 dev-tool

index.html 文件内容见附录：index.html

本地测试

所需软件： Releases · oldj/SwitchHosts · GitHub

1. 将 h5.juejin.cn 解析到本地ip

# 172.16.3.1 换成自己机器的ip，使用 127.0.0.1 也可以，如果要支持手机访问，必须指定 ip
172.16.3.16 h5.juejin.cn

2. 配置 nginx

将配置粘贴到 nginx.conf 文件中

3. 将网页放入对应目录中

4。浏览器访问

正式版：http://h5.juejin.cn

测试版：http://h5.juejin.cn/test

附赠小知识

nginx 中的或（||）、且（&&）运算

nginx 中没有或、且运算符，使用以下方式代替：

location /{
    set $condiction '';
    if ($http_referer  = ''){
        #### 打开网页或刷新网页时 Referer 表头为空
        set $condiction 'noReferer';
    }
    if ($http_cookie ~* "env=(.+?)(?=;|$)"){
        set $condiction '$condiction isTest';
    }
    if ($condiction = 'noReferer isTest'){
        #### 满足条件1(打开网页或刷新网页)、 条件2(测试环境)时跳转到提示页面
        rewrite ^/(.*) /dev-tool?redirect=$request_uri redirect;
    }
}

判断请求 cookie 中是否包含测试环境标识：

location = /test{
    if ($http_cookie ~* "env=(.+?)(?=;|$)"){
        add_header Set-Cookie 'env=test1;expire=Tue, 09 Nov 2021 02:39:01 GMT;path=/';
    }
}

附录

dev-tool/dev-tool/index.html 文件内容：

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>提示</title>
    </title>
    <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.0.1/weui.min.css">
    <script type="text/JAVAscript" src="https://res.wx.qq.com/t/wx_fed/cdn_libs/res/weui/1.2.3/weui.min.js"></script>
</head>

<body>
    <script>
        /*
   设置cookie
   name:键
   value:值
   expire:过期时间
   */
        function setCookie(name, value, expire) {
            var exp = new Date();
            exp.setTime(exp.getTime() + expire * 24 * 60 * 60 * 1000 * 1);
            document.cookie = name + "=" + escape(value) + ";expires=" + exp.toGMTString();
        };
        //根据键获取cookie
        function getCookie(name) {
            var arr, reg = new RegExp("(^| )" + name + "=([^;]*)(;|$)");
            if (arr = document.cookie.match(reg))
                return unescape(arr[2]);
            else
                return null;
        };
        //删除cookie
        function delCookie(name) {
            var exp = new Date();
            exp.setTime(exp.getTime() - 1);
            var cval = getCookie(name);
            if (cval != null)
                document.cookie = name + "=" + cval + ";expires=" + exp.toGMTString() + ";Path=/";
        };


        function getQueryVariable(variable) {
            var url = window.location.href;
            var str = url.split('?');
            var query = str[1];
            var vars = query.split('&');
            console.log(query, str, vars);
            for (var i = 0; i < vars.length; i++) {
                var pAIr = vars[i].split("=");
                console.log(pair);
                if (pair[0] == variable) {
                    return pair[1];
                }
            }
            return (false);
        }
        // console.log(getQueryVariable('redirect'));
        // console.log(getQueryVariable("redirect"));

        // var redirectUrl = getQueryVariable('redirect');

        var redirectUrl = window.location.href.split("redirect=")[1]
        console.log(redirectUrl);



        function toTest() {
            console.log('yes');
            window.location.replace(redirectUrl);
        }
        function toRelese() {
            console.log('no');
            delCookie("env");
            window.location.replace(redirectUrl);
        }
        weui.confirm('你正在访问测试版，是否继续？', {
            title: '提示',
            buttons: [{
                label: '访问正式版',
                type: 'default',
                onClick: function () { console.log('no'); toRelese(); }
            }, {
                label: '确定',
                type: 'primary',
                onClick: function () { console.log('yes'); toTest(); }
            }]
        });
    </script>

</body>

</html>

问题一：uni-App 打包出来的 H5 版本，使用这个 nginx 配置会报 404

location / {
    set $condiction '';
    if ($http_referer  = ''){
        #### 打开网页或刷新网页时 Referer 表头为空
        set $condiction 'noReferer';
    }
}

可以改为这样：

location / {
    set $condiction 'noReferer';
    if ($http_referer){
        set $condiction '';
    }
}

问题二：访问页面路径返回404， uni-app 打包出来的 H5 版本，直接访问访问某个页面的链接时，使用这个 nginx 配置会报 404

问题描述：

部署 uni-app 打包出来的 H5 版本（目前只测试了这个，其他未测试）
访问首页没问题，如: http://h5.juejin.cn
访问页面路径报错 404，如：
http://h5.juejin.cn/pages/mine/index

错误原因：

if 指令在 location 上下文中使用会有些问题。官网文档：If is Evil… when used in location context | NGINX

解决方法：

把部分 if 指令放到 server 上下文中

解决此问题感谢：

try-files-always-returns-404-with-variable @ https://stackoverflow.com/questions/44077452/try-files-always-returns-404-with-variable
https://segmentfault.com/q/1010000039845108

修改前（前往修改后）：

server {
    listen       80;
    server_name  h5.juejin.cn;


    location / {
        #### 判断是否跳转到确认页面    开始 start      ========
        # ============================================ uni-app 打包出来的 H5 版本，使用这个会报 404
        # set $condiction '';
        # if ($http_referer  = ''){
        #     set $condiction 'noReferer';
        # }
        # =====================================================
        set $condiction 'noReferer';
        if ($http_referer){
            #### 打开网页或刷新网页时 Referer 表头为空
            set $condiction '';
        }
        if ($http_cookie ~* "env=(.+?)(?=;|$)"){
            #### cookie 中包含“测试环境”标识
            set $condiction '$condiction isTest';
        }
        if ($http_cookie ~* "ignoreConfirm=(.+?)(?=;|$)"){
            ####  cookie 中包含“首次访问测试环境忽略提示页面”标识
            set $condiction '$condiction ignoreConfirm';
        }
        #### 清除 cookie 中的“首次访问测试环境忽略提示页面”标识
        add_header Set-Cookie 'ignoreConfirm=true;expires=Thu, 09 Dec 1970 06:05:42 GMT;path=/';
        if ($condiction = 'noReferer isTest'){
            #### 满足条件1(打开网页)、 条件2(测试环境)时跳转到提示页面
            rewrite ^/(.*) /dev-tool?redirect=$request_uri redirect;
        }
        #### 判断是否跳转到确认页面    结束 end      ========

        #### 判断是否使用测试版   开始 start      ========
        if ($http_cookie ~* "env=(.+?)(?=;|$)"){
            # proxy_pass http://localhost:7001;
            proxy_pass http://localhost:11000;
        }
        #### 判断是否使用测试版    结束 end      ========

        root    h5;
        index   index.html index.htm;
        # try_files $uri $uri/ /index.html;

        add_header Cache-Control no-store;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

        # proxy_set_header Host $host:7001;
        ####        微信H5支付 获取用户端ip用   结束 start      ========
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Real-Port $remote_port;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        ####        微信H5支付 获取用户端ip用   结束 end      ========


    }
    location /dev-tool{
        root    dev-tool;
        index   index.html index.htm;
    }

    location = /test{
        ### 访问测试环境，使用cookie标识访问的是测试环境；cookie过期时间设置为1000年；
        add_header Set-Cookie 'env=test;expires=Thu, 09 Dec 3021 06:05:42 GMT;path=/';
        ### 首次开启测试环境时增加“忽略提示页面”标识
        add_header Set-Cookie 'ignoreConfirm=true;expires=Thu, 09 Dec 3021 06:05:42 GMT;path=/';
        rewrite ^/(.*) / redirect;
    }
}

修改后：

server {
    listen       80;
    server_name  h5.juejin.cn;
    
    ### 判断是否跳转到确认页面    开始 start      ========
    set $condiction 'noReferer';
    if ($http_referer){
        set $condiction '';
    }
    ## 打开微信聊天记录中的链接时，微信会先显示一个外链提示页面，点击 继续访问 才能打开网页。此时 Referer = https://weixin110.qq.com/。
    if ($http_referer = "https://weixin110.qq.com/") {
        set $condiction 'noReferer';
    }
    ## 忽略掉访问 /dev-tool 开头的请求
    if ($uri ~* "dev-tool(.*)") {
        set $condiction "$condiction ignoreUri";
    }
    if ($http_cookie ~* "env=(.+?)(?=;|$)") {
        #### cookie 中包含“测试环境”标识
        set $condiction '$condiction isTest';
    }
    if ($http_cookie ~* "ignoreConfirm=(.+?)(?=;|$)") {
        ####  cookie 中包含“首次访问测试环境忽略提示页面”标识
        set $condiction '$condiction ignoreConfirm';
    }
    if ($condiction = 'noReferer isTest') {
        #### 满足条件1(打开网页)、 条件2(测试环境)时跳转到提示页面
        rewrite ^/(.*) /dev-tool?redirect=$request_uri redirect;
    }
    #### 判断是否跳转到确认页面    结束 end      ========

    location / {
        #### 清除 cookie 中的“首次访问测试环境忽略提示页面”标识
        add_header Set-Cookie 'ignoreConfirm=true;expires=Thu, 09 Dec 1970 06:05:42 GMT;path=/';
        #### 判断是否使用测试版   开始 start      ========
        if ($http_cookie ~* "env=(.+?)(?=;|$)") {
            # proxy_pass http://localhost:7001;
            proxy_pass http://localhost:11000;
        }
        #### 判断是否使用测试版    结束 end      ========

        root h5;
        try_files $uri $uri/ /index.html;

        add_header Cache-Control no-store;
        add_header Access-Control-Allow-Origin *;
        add_header Access-Control-Allow-Headers X-Requested-With;
        add_header Access-Control-Allow-Methods GET,POST,OPTIONS;

        # proxy_set_header Host $host:7001;
        ####        微信H5支付 获取用户端ip用   结束 start      ========
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        proxy_set_header X-Real-Port $remote_port;
        proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
        ####        微信H5支付 获取用户端ip用   结束 end      ========
    }

    location /dev-tool {
        root dev-tool;
        index index.html index.htm;
    }

    location = /test {
        ### 访问测试环境，使用cookie标识访问的是测试环境；cookie过期时间设置为1000年；
        add_header Set-Cookie 'env=test333;expires=Thu, 09 Dec 3021 06:05:42 GMT;path=/';
        ### 首次开启测试环境时增加“忽略提示页面”标识
        add_header Set-Cookie 'ignoreConfirm=true;expires=Thu, 09 Dec 3021 06:05:42 GMT;path=/';
        rewrite ^/(.*) / redirect;
    }
}

Tags：nginx 点击:() 评论:()

声明：本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,不构成投资建议。投资者据此操作，风险自担。如有任何标注错误或版权侵犯请与我们联系，我们将及时更正、删除。

▌相关推荐

为什么Nginx被称为“反向”代理呢？

Nginx（发音为"engine-x"）是一款高性能、轻量级的开源Web服务器软件，也可用作反向代理服务器、负载均衡器和HTTP缓存。Nginx之所以有被称为“反向”代理，是因为它充当客户端设备...【详细内容】

2024-02-01　　Search: nginx 点击:(61)　　评论:(0)　　加入收藏

如何在Java环境中安装Nginx？

1. 下载Nginx：首先，前往Nginx官方网站（https://nginx.org/en/download.html）下载新版本的Nginx。选择适合您操作系统的版本，通常有Windows、Linux和Mac等不同操作系统的版本可供...【详细内容】

2024-01-22　　Search: nginx 点击:(71)　　评论:(0)　　加入收藏

一文教你学会使用Nginx

前段时间，了不起给大家说过如果使用 Docker 发布自己的后端项目，也就不再使用 Jar 包进行项目的发版操作，但是这其中就又涉及到了前端如何发版，为什么这么说，因为资深前端开发，可...【详细内容】

2023-12-27　　Search: nginx 点击:(92)　　评论:(0)　　加入收藏

Nginx 反向代理为什么叫做“反向”？

今天我们来聊聊正向代理和反向代理。01 正向代理（Forward Proxy）正向代理是位于用户设备和互联网之间的服务器。它代理的是客户端，是站在用户一方的。其真实客户端对于服务器不...【详细内容】

2023-12-06　　Search: nginx 点击:(94)　　评论:(0)　　加入收藏

Nginx的负载均衡实现，你学会了吗？

环境主机 ip 用途软件 web1 192.168.50.60 nginx-1 httpd web2 192.168.50.61 nginx-2 httpd proxy 192.168.50.62 负载...【详细内容】

2023-12-06　　Search: nginx 点击:(146)　　评论:(0)　　加入收藏

Nginx如何开启GZIP文件压缩，你学会了吗？

简介GZip 是一种改进web应用程序性能的技术，文件压缩后再传输可以减少传输数据，提升传输速度。在Nginx服务器上开启Gzip压缩可以有效减少网络传输流量，提升网站的访问速度和性...【详细内容】

2023-11-30　　Search: nginx 点击:(123)　　评论:(0)　　加入收藏

Nginx配置文件中的关键字是什么？

Nginx 是一款高性能的 Web 服务器软件，同时也是一款反向代理服务器软件。Nginx 的配置文件通常是 /etc/nginx/nginx.conf，以下是一个典型的配置文件，并对其中的关键字进行详细...【详细内容】

2023-11-22　　Search: nginx 点击:(149)　　评论:(0)　　加入收藏

Nginx 大揭秘：读写分离助力您轻松征服高并发

引言在构建高性能、高可用的 Web 应用时，如何有效地处理数据库的读写负担已成为一个十分重要的考虑因素。Nginx 作为一款强大的反向代理服务器，提供了简单而灵活的负载均衡配...【详细内容】

2023-11-14　　Search: nginx 点击:(56)　　评论:(0)　　加入收藏

Kubernetes 部署应用(Nginx)的两种方式，你更喜欢哪一种？

k8s发布应用的两种方式： kubernetes-dashboard kubectl命令行一、Dashboard方式配置部署：包含应用名称、容器镒、pod数量、Service非常的方便，不想设置配置yaml的可以很方便的...【详细内容】

2023-11-06　　Search: nginx 点击:(372)　　评论:(0)　　加入收藏

掌握Nginx的高级用法，构建高性能Web应用

Nginx是一款高性能的Web服务器和反向代理服务器，它广泛用于构建高性能、可靠和安全的Web应用程序。除了基本的用法外，Nginx还提供了一些高级功能和配置选项，可以进一步优化性能...【详细内容】

2023-10-26　　Search: nginx 点击:(220)　　评论:(0)　　加入收藏

▌简易百科推荐

为什么Nginx被称为“反向”代理呢？

2024-02-01　　coderidea　　微信公众号　　Tags:Nginx 　点击:(61)　　评论:(0)　　加入收藏

哪种服务器操作系统更好呢？

在当今的IT世界中，服务器操作系统扮演着至关重要的角色。它们是确保服务器能够高效、安全地运行的关键因素。然而，对于许多人来说，服务器操作系统的种类和特点可能是一个复杂的...【详细内容】

2024-01-30　　　　简易百科　　Tags:操作系统　点击:(81)　　评论:(0)　　加入收藏

什么是VPS服务器

VPS服务器是一种虚拟化技术，它将一台物理服务器划分为多个虚拟的独立服务器，每个虚拟服务器都可以拥有自己的操作系统、运行环境、应用程序等。这种技术使得每个虚拟服务器可...【详细内容】

2024-01-30　　　　简易百科　　Tags:VPS服务器　点击:(76)　　评论:(0)　　加入收藏

VPS服务器下载速度慢?这五招帮你提速

VPS服务器下载速度慢可能会让用户感到沮丧，尤其是对于需要大量下载和上传数据的用户。幸运的是，有一些方法可以帮助您提高VPS服务器的下载速度，使您的在线体验更加顺畅。在本文...【详细内容】

2024-01-30　　IDC行业观察者　　　　Tags:VPS服务器　点击:(61)　　评论:(0)　　加入收藏

美国VPS和英国VPS：地理位置对服务器性能的影响

在今天的数字时代，VPS已成为在线业务和网站托管的关键组成部分。然而，选择合适的VPS主机服务时，地理位置通常被忽视，尽管它对服务器性能有着重要的影响。本文将探讨美国VPS和英...【详细内容】

2024-01-26　　IDC行业观察者　　　　Tags:服务器　点击:(56)　　评论:(0)　　加入收藏

如何判断服务器所需带宽：基于业务需求和流量模式的关键考量

在选择服务器时，带宽是一个重要的考虑因素。带宽的大小直接影响到网站的加载速度和用户的访问体验。那么，如何判断服务器需要多大的带宽呢?本文将为你揭示这一关键问题的答案...【详细内容】

2024-01-26　　源库科技　　　　Tags:服务器　点击:(81)　　评论:(0)　　加入收藏

服务器内存空间及IO操作原理解析

服务器的内存空间分为内核空间和用户空间，而我们编写的程序通常在用户空间中运行。在进行读写操作时，我们直接操作的是用户缓冲区，而用户缓冲区的内容来自于内核缓冲区。这种内...【详细内容】

2024-01-23　　王建立　　　　Tags:服务器　点击:(46)　　评论:(0)　　加入收藏

如何在Java环境中安装Nginx？

2024-01-22　　敲代码的小动　　　　Tags:Nginx 　点击:(71)　　评论:(0)　　加入收藏

服务器证书和SSL证书有啥区别？

在互联网经济时代，随着越来越多的信息以及合作都是从企业官网开始的，因此绝大多数企业都会为自己的网站配置SSL证书，以提高安全性。在接触SSL证书时，也有很多人称之为服务器证书...【详细内容】

2024-01-10　　安信SSL证书　　　　Tags:服务器证书　点击:(67)　　评论:(0)　　加入收藏

宝塔面板怎样部署java项目？

宝塔面板怎样部署java项目？在使用宝塔面板部署Java项目之前，需要确保已经安装了Java Development Kit (JDK)。接下来，将介绍如何使用宝塔面板来部署Java项目的步骤。步骤一：安装...【详细内容】

2024-01-09　　西部数码　　　　Tags:宝塔面板　点击:(128)　　评论:(0)　　加入收藏

推荐资讯

凌晨3点北京鬼市，天亮	老美怂了？美国众议院计
Meta AI 全球市场扩张	重磅！Meta推出开源大模
多地将禁止超标车上路	喝完一瓶啤酒，多久才能
古代富人都喜欢“扬州	夫妻一方可查询配偶财