公告列表
公告列表
收藏
回答

网页授权域名使用“路径指向的web服务器（或虚拟主机）的目录”配置出现10003错误？

问题：

网页授权域名使用了 “路径指向的web服务器（或虚拟主机）的目录” 方式后，通过将相应的校验文件和公众号网页一起打包，并通过nginx部署至服务器，采用 `域名+Path` 方式指向来获取相应资源，公众号设置上填写正确访问路径目录后，校验通过保存成功。公众号网页打包时配置redirectUri为公众号所设置的网页授权域名的值，出现在访问中，微信授权登录时，出现 “redirect_uri域名与后台设置不一致，错误码10003”

请问这种配置方式下，公众号网页在调用云开发 Web SDK 的cloud.startLogin()方法时，参数所填写的 `redirect_uri` 应该如何填写？

当前配置情况：

公众号-公众号设置-功能设置-网页授权域名（大概格式）：sub.testxxx.com/web

公众号网页，调用云开发 Web SDK 的cloud.startLogin()，配置redirect_uri: https://sub.testxxx.com/web

运行公众号网页nginx容器A：

    listen 80;
    location /__wx__/ {
        proxy_pass https://servicewechat.com/wxa-qbase/;
    }

    location / {
        root   /usr/share/nginx/html;   # 已放置公众号静态网页
        index  index.html index.htm;
    }

公众号静态网页目录

--/usr/share/nginx/html
   | -- ...
   | -- index.html
   | -- MP_verify_xxxxxxx.txt

前置nginx负载均衡，代理域名sub.testxxx.com

   {
        listen 443;
        ssl on;
        location ~* "^/web(/|$)(.*)" {
             rewrite "(?i)/web(/|$)(.*)" /$2 break;
             proxy_pass http://A容器:80;
             proxy_redirect  off;
        } 
        location ~* "^/__wx__(/|$)(.*)" {
             rewrite "(?i)/__wx__(/|$)(.*)" /__wx__/$2 break;
             proxy_pass http://A容器:80;
             proxy_redirect  off;
        }
   }

测试情况：

curl https://sub.testxxx.com/web/

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" href="./favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport" />
    <title>公众号网页</title>
    <!-- 公众号 JSSDK -->
    <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
    <!-- 云开发 Web SDK -->
    <script src="https://res.wx.qq.com/open/js/cloudbase/1.2.0/cloud.js"></script>
  <script type="module" crossorigin src="./assets/index.978a9c1f.js"></script>
  <link rel="modulepreload" href="./assets/vendor.0f57903d.js">
  <link rel="stylesheet" href="./assets/index.4b3c4cd9.css">
</head>
  <body>
    <div id="app"></div>
    
  </body>
</html>

curl https://sub.testxxx.com/web/MP_verify_xxxxxxx.txt
kJZoNHudBuxxxxxx

curl https://sub.testxxx.com/__wx__/oauth
{"base_resp":{"ret":40097,"errmsg":""}}

上述访问已成功测试获取资源正常，对接 `servicewechat.com` 服务正常。

但在实际微信上尝试使用时，均出现10003错误

请麻烦官方解答一下，在正常使用云开发web SDK时填写redirect_uri与公众号后台的域名字符串后，为何还会出现不一致错误？谢谢


补充：访问url在经过前置nginx中转后，到达服务nginx的路径接收变化情况 

https://sub.testxxx.com/web/MP_verify_xxxxxxx.txt   前置nginx 
  --> http://A容器:80/MP_verify_xxxxxxx.txt         服务nginx 

https://sub.testxxx.com/__wx__/oauth         前置nginx 
   --> http://A容器:80/__wx__/oauth           服务nginx 
     --> https://servicewechat.com/wxa-qbase/oauth 外部
最后一次编辑于  2021-04-17
回答关注问题邀请回答
收藏

1 个回答

  • 2021-04-21

    经过论坛查询相关10003历史提问和相应评论，最后通过部署核实，总结出两种比较正确的配置方式。但前提需要满足一个先决的配置，仅供参考。

    先决条件：

    其中官方在设置页面上说的多写的这段话，直接忽略，请绕过这句话，因为存在实现不完整。

    若填写路径，将文件放置在路径目录下，例如wx.qq.com/mp/MP_verify_kJZoNHudBxxxxxxx.txt），并确保可以访问。

    公众号-功能设置-网页授权域名设置：只配置域名，即填写类似 `sub.aaa.bbb.com`，则这样等同于微信官方校验文件访问url等于 

    https://sub.aaa.bbb.com/MP_verify_kJZoNHudBxxxxxxx.txt

    所以保证这个curl能获取到你放置这个校验文件静态服务，例如nginx。


    方案一：通过只用域名方式来配置，这个是最简单的方式。

    1.公众号静态网页和校验文件打包放置一个目录，然后利用nginx托管静态服务

    • 此时静态页面目录结构大致如下
    ./dist
 |--- index.html
 |--- MP_verify_xxxxxx.txt
 |--- src/
 |---...
    • nginx配置(docker)
    # /etc/nginx/conf.d/default.conf
server {
    listen 80;
    # 为兼容ios14代理微信服务验证
    location /__wx__/ {
        proxy_pass https://servicewechat.com/wxa-qbase/;
    }
    # 定向静态网页
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
}

    2.验证并使得公众号功能设置-网页授权域名设置成功

    • 通过网页访问或者curl访问以下url ，能够获得校验文件内容，则网页授权域名设置：sub.aaa.bbb.com 能够保存成功。
    https://sub.aaa.bbb.com/MP_verfiy_xxxx.txt`
    • 通过网页访问或者curl访问以下url，能够获得类似的json `{"base_resp":{"ret":40097,"errmsg":""}}` 返回，则说明能够成功访问 servicewechat服务
    https://sub.aaa.bbb.com/__wx__/check_login


    方案二：通过只用path方式，然后前置代理nginx重定向至内部的托管静态网页的nginx服务，譬如k8s的ingress和pod配套使用。

    1.公众号静态网页和校验文件打包放置一个目录，然后利用nginx托管静态服务

    • 此时静态页面目录结构大致如下
    ./dist
 |--- index.html
 |--- MP_verify_xxxxxx.txt
 |--- src/
 |---...
    • nginx配置(pod)
    # /etc/nginx/conf.d/default.conf
server {
    listen 80;
    # 为兼容ios14代理微信服务验证
    location /__wx__/ {
        proxy_pass https://servicewechat.com/wxa-qbase/;
    }
    # 代理公众号网页
    location /mpweb/ {
        proxy_pass http://127.0.0.1:90/;
    }
    # 代理其他附带静态文件，例如MP_verfiy验证文件
    location / {
        root   http://127.0.0.1:90/;
    }
}

server {
    listen       90;
    # 定向静态网页
    location / {
        root /usr/share/nginx/html;
        try_files $uri $uri/ /index.html;
    }
}


    2.配置ingress，使得ingress-controller生成相应的nginx配置

    • 使得ingress通过指定path来定向至内部的静态服务svc，再转至pod
    apiVersion: extensions/v1beta1
kind: Ingress
metadata:
  annotations:
    ....
    nginx.ingress.kubernetes.io/ssl-redirect: "true"
  name: mpweb-ingress
  namespace: namespace-mpweb
spec:
  rules:
  - host: sub.aaa.bbb.com
    http:
      paths:
      - backend:
          serviceName: mpweb-svc
          servicePort: 80
        path: /mpweb
      - backend:
          serviceName: mpweb-svc
          servicePort: 80
        path: /__wx__
      - backend:
          serviceName: mpweb-svc
          servicePort: 80
        # 根据自己的校验文件
        path: /MP_verify_kJZoNHuxxxxx.txt
  tls:
  - hosts:
    - sub.aaa.bbb.com
    secretName: subaaabbcom-tls-secret


    • 通过apply生效yaml文件后，大致在ingress-controller上可以看到nginx配置内容
    location ~* "^/__wx__" { 
      set $namespace      "nampespace-mpweb";
      set $ingress_name   "mpweb-ingress";
      set $service_name   "mpweb-svc";
      set $service_port   "80";
      set $location_path  "/__wx__";
      ...;
      proxy_pass http://upstream_balancer;
}
location ~* "^/mpweb" {
      set $namespace      "nampespace-mpweb";
      set $ingress_name   "mpweb-ingress";
      set $service_name   "mpweb-svc";
      set $service_port   "80";
      set $location_path  "/mpweb";
      ...;
      proxy_pass http://upstream_balancer;
}
location ~* "^/MP_verify_kJZoNHxxxxxxxx.txt" { 
      set $namespace      "nampespace-mpweb";
      set $ingress_name   "mpweb-ingress";
      set $service_name   "mpweb-svc";
      set $service_port   "80";
      set $location_path  "/MP_verify_kJZoNHxxxxxxxx.txt";
      ...;
      proxy_pass http://upstream_balancer;
}


    3.以上内容相当于起到定向且直通内部服务

    • 代理内path变化情况如下
    # 校验文件
ingress层 https://sub.aaa.bbb.com/MP_verify_kJZoNHxxxxxxxx.txt
svc层 http://nampespace-mpweb-mpweb-svc-80/MP_verify_kJZoNHxxxxxxxx.txt
pod层 http://mpweb-pod:80/MP_verify_kJZoNHxxxxxxxx.txt
内部  http://127.0.0.1:90/MP_verify_kJZoNHxxxxxxxx.txt

# 访问servicewechat
ingress层 https://sub.aaa.bbb.com/__wx__/check_login
svc层 http://nampespace-mpweb-mpweb-svc-80/__wx__/check_login
pod层 http://mpweb-pod:80/__wx__/check_login
内部  https://servicewechat.com/wxa-qbase/check_login

# 访问静态网页
ingress层 https://sub.aaa.bbb.com/mpweb/#/
svc层 http://nampespace-mpweb-mpweb-svc-80/mpweb/#/
pod层 http://mpweb-pod:80/mpweb/#/
内部 http://127.0.0.1:90/#/


    4.验证并使得公众号功能设置-网页授权域名设置成功

    • 通过网页访问或者curl访问以下url ，能够获得校验文件内容，则网页授权域名设置：sub.aaa.bbb.com 能够保存成功。
    https://sub.aaa.bbb.com/MP_verfiy_xxxx.txt`
    • 通过网页访问或者curl访问以下url，能够获得类似的json `{"base_resp":{"ret":40097,"errmsg":""}}` 返回，则说明能够成功访问 servicewechat服务
    https://sub.aaa.bbb.com/__wx__/check_login


    总结：

    1.对于第二种解决方案，主要是方便把服务托管至已经有的域名体系下，通过path来重定位内部托管的公众号静态服务，又因为微信官方的所谓“文档”和“友好”，需要另外对于校验文件的url和servicewechat的访问在前置nginx上再做具体path的rewrite，才能解决一直出现在微信app上的 `redirect_uri与后台配置域名不一致` 错误。

    2.对于微信云开发SDK中，cloud.startLogin() 中的redirect_uri填写问题，根据采取的部署方案来填写

    # 采用方案一的方式填写
https://sub.aaa.bbb.com

# 采取方案二的方式填写
https://sub.aaa.bbb.com/mpweb

    从中也间接说明SDK的redirect_uri的相应填写，是根据自己部署静态网页服务后，所定的url的path来确定。

    3.至于为什么公众号上网页授权域名设置上，只使用域名来填写是正确的，而不使用带路径的方式，但官方又说明了可以使用路径方式，那就不清楚了。

    2021-04-21
    有用 1
    回复 1
    • 月亮也晚安
      月亮也晚安
      2023-04-24
      我可以简单的理解为配置的域名如果是sub.aaa.bbb.com，redirect_uri可以配置为sub.aaa.bbb.com/aa/bb，如果域名是sub.aaa.bbb.com/mpweb，redirect_uri必须是以sub.aaa.bbb.com/mpweb开头的吗，类似于sub.aaa.bbb.com/mpweb/aa/bb
      2023-04-24
      赞
      回复
请 登录 后发表内容
相关问题
相关文档
问题标签
公众号路径域名服务器授权