国内网页分享代码常因跨域限制导致微信/微博分享失败

Question

国内网页在集成微信/微博分享功能时，常因跨域限制导致分享失败：典型表现为调用 `WeixinJSBridge` 或微博 `WB2` SDK 时控制台报错“Cannot access 'xxx' from script at origin 'https://a.com'”，或 `config:fail invalid signature`（签名验证失败）。根本原因在于——微信/微博 JS-SDK 要求 `jsapi_ticket` 和 `nonceStr` 等参数必须由当前页面域名（`location.origin`）在服务端动态签名生成，而许多开发者错误地将签名逻辑前置到 CDN、静态页或跨子域前端（如 `static.example.com`）中执行，导致签名域名与实际分享页域名不一致；同时，前端直接请求非同源的签名接口（如 `api.example.com/share/config`）又因缺少 CORS 头被浏览器拦截。此外，H5 应用嵌入小程序 WebView 或 PWA 场景下，`window.location.href` 动态变化却未重新签名，亦会触发 signature 失效。解决关键：签名服务必须与分享页同源（或显式配置可信域名），且签名 URL 必须为当前 `location.href` 的完整路径（含 hash 前）。

Answer 1

```html

一、现象层：典型错误表现与前端可观测线索

• 控制台报错："Cannot access 'WeixinJSBridge' from script at origin 'https://a.com'"（跨域访问被浏览器拒绝）
• 微信 JS-SDK 初始化失败：config:fail invalid signature 或 config:fail permission denied
• 微博 WB2 SDK 报错：WB2.init failed: invalid url signature
• 分享按钮点击无响应，WX.ready() 回调永不触发，或直接进入 error 回调
• 同一套前端代码在 https://www.example.com/page1 可用，但在 https://m.example.com/page1 失效（子域未统一配置）

二、机制层：JS-SDK 签名验证的底层逻辑链

微信/微博签名非简单 token，而是强绑定「域名 + URL路径 + 时间窗口」的三重校验：

1. 服务端调用微信接口 https://api.weixin.qq.com/cgi-bin/ticket/getticket 获取 jsapi_ticket（2小时有效期，需缓存）
2. 拼接签名原文：jsapi_ticket=xxx&noncestr=yyy&timestamp=zzz&url=https%3A%2F%2Fwww.example.com%2Farticle%2F123（注意：URL 必须是 location.href 去 hash 后的完整协议+域名+路径+查询参数）
3. 使用 SHA1 对原文签名 → 得到 signature
4. 前端调用 WX.config({ appId, timestamp, nonceStr, signature, jsApiList })，微信客户端向其服务端二次校验该 signature 是否匹配当前页面 URL 和已备案域名

三、根因层：跨域失效的四大技术断点

断点类型	典型场景	技术后果
① 域名不一致	静态资源部署在 static.example.com，但页面主域为 www.example.com，且未在微信公众号后台配置 static.example.com 为可信域名	签名中 url 字段域名与实际页面 location.origin 不符，微信校验直拒
② CORS 阻断	前端尝试 AJAX 请求 https://api.example.com/share/sign 获取签名配置	浏览器拦截跨域请求，fetch 抛错，无法获取 signature
③ URL 路径失真	Vue Router history 模式下，location.href = "https://a.com/#/post/1"，但签名时传入 url 为 "https://a.com/"（漏掉 hash 后路径）	微信比对 URL 不匹配，判定 signature 无效
④ 动态路由未重签	PWA 应用内通过 history.pushState 切换文章页，但未监听 popstate 重新调用后端签名接口	旧 signature 绑定前一页 URL，新页 config 失败

四、解法层：生产级可落地的五维协同方案

1. 同源签名服务：将 /wxjsapi/config 接口部署在页面主域下（如 https://www.example.com/wxjsapi/config），避免跨域；Nginx 可 proxy_pass 至内部 API，但 Host 头保持原样
2. URL 精确截取：服务端签名前，严格使用 req.headers.referer 或前端透传的 encodeURIComponent(window.location.href.split('#')[0]) 作为签名 URL
3. CORS 安全兜底：若必须跨域调用（如微前端架构），后端需返回：
   Access-Control-Allow-Origin: https://trusted-subdomain.example.com
Access-Control-Allow-Credentials: true
4. 前端路由监听：在 SPA 中注入全局路由守卫：

   router.afterEach((to, from) => {
     if (isWechatBrowser()) {
       fetch('/wxjsapi/config?url=' + encodeURIComponent(location.href.split('#')[0]))
         .then(r => r.json()).then(initWXConfig);
     }
   });

5. 可信域名分级管理：微信公众号后台配置主域 example.com（自动覆盖所有子域），微博开放平台启用「全域授权」并提交子域白名单

五、验证层：签名有效性自检流程图

graph TD
  A[用户打开页面 https://m.example.com/news/2024] --> B{是否微信内置浏览器？}
  B -- 是 --> C[前端读取 location.href.split('#')[0] → URL]
  B -- 否 --> D[跳过 JS-SDK 初始化]
  C --> E[GET /wxjsapi/config?url=...]
  E --> F{HTTP 200 & CORS 允许？}
  F -- 是 --> G[解析 signature/timestamp/nonceStr]
  F -- 否 --> H[报错：CORS blocked or 500]
  G --> I[调用 WX.config]
  I --> J{微信服务端校验通过？}
  J -- 是 --> K[WX.ready 触发，分享可用]
  J -- 否 --> L[config:fail invalid signature → 检查URL/域名/缓存jsapi_ticket]

```