1. 背景

当前用户可能会通过微信浏览器打开如下地址：

https://payment.xxx.com/customerorderdetails?code=yyy

但在微信场景下，需要将用户自动跳转到公众号域名：

https://wx.xxx.cn/customerorderdetails?code=yyy

普通浏览器访问时，不需要跳转，继续访问原来的前端页面。

2. 实现目标

根据请求的 User-Agent 判断是否来自微信浏览器：

• 如果是微信浏览器：跳转到 wx.xxx.cn
• 如果不是微信浏览器：继续访问原来的 Vue 前端路由

微信浏览器的 User-Agent 中通常包含：

MicroMessenger

3. Nginx 配置

3.1 在 http 级别添加 map

# 注意：map 不能写在 server 内部，通常写在 nginx.conf 的 http {} 中。
map $http_user_agent $is_wechat_browser {
    default 0;
    ~*MicroMessenger 1;
}

说明：

• $http_user_agent：当前请求的 User-Agent
• $is_wechat_browser：自定义变量
• 默认值为 0，表示非微信浏览器
• 当 User-Agent 包含 MicroMessenger 时，值为 1

3.2 在 server 中添加订单页跳转规则

# 在 payment.xxx.com 对应的 server 中添加订单页跳转规则
server {
    # 当用户使用微信打开时跳转到公众号域名
    # 需要注意，该请求是前端 Vue 的路由

    location = /customerorderdetails {
        if ($is_wechat_browser) {
            return 302 https://wx.xxx.cn$request_uri;
        }

        # 非微信浏览器继续原来的前端路由处理
        try_files $uri $uri/ /index.html;
    }

    # 其它原有配置保持不变
}

4. 关键点说明

4.1 为什么使用 $request_uri

return 302 https://wx.xxx.cn$request_uri;

$request_uri 会保留原始路径和参数。

例如原始请求是：

/customerorderdetails?code=yyy

跳转后会变成：

https://wx.xxx.cn/customerorderdetails?code=yyy

这样可以保证 code 参数不会丢失。

4.2 为什么非微信浏览器要使用 try_files

/customerorderdetails 是 Vue 前端路由，并不是真实存在的静态文件。

如果非微信浏览器不走：

try_files $uri $uri/ /index.html;

可能会导致请求被错误转发到后端接口，从而出现 401 等问题。

所以非微信浏览器必须继续回落到：

/index.html

让前端路由接管页面。

4.3 为什么使用 302

这里使用：

return 302 ...

而不是 301。

原因是：

• 302 是临时跳转，方便测试和回滚
• 微信浏览器、浏览器、中间代理可能会缓存 301
• 当前属于业务兼容处理，使用 302 更稳妥

5. 测试方式

5.1 模拟微信浏览器

curl -I \
  -A 'Mozilla/5.0 MicroMessenger' \
  'https://payment.xxx.com/customerorderdetails?code=yyy'

预期结果：

HTTP/2 302
Location: https://wx.xxx.cn/customerorderdetails?code=yyy

5.2 模拟普通浏览器

curl -I \
  -A 'Mozilla/5.0 Chrome' \
  'https://payment.xxx.com/customerorderdetails?code=yyy'

预期结果：

• 不跳转到 wx.xxx.cn
• 正常返回前端页面
• 不应该返回 401

6. 最终配置示例

map $http_user_agent $is_wechat_browser {
    default 0;
    ~*MicroMessenger 1;
}

server {
    # 当用户使用微信打开时跳转到公众号域名
    # 需要注意，该请求是前端 Vue 的路由
    location = /customerorderdetails {
        if ($is_wechat_browser) {
            return 302 https://wx.xxx.cn$request_uri;
        }

        # 非微信浏览器继续原来的前端路由处理
        try_files $uri $uri/ /index.html;
    }
}

7. 总结

本次配置的核心逻辑是：

微信浏览器访问 payment.xxx.com/customerorderdetails
    ↓
302 跳转到 wx.xxx.cn/customerorderdetails

普通浏览器访问 payment.xxx.com/customerorderdetails
    ↓
继续走原 Vue 前端路由

需要特别注意：

/customerorderdetails 是前端路由，不是后端接口

因此非微信浏览器不能直接转发到后端，否则可能出现 401。