以下篇幅將會描述不同前提下對應的調試策略，當然也有可能不是最優(yōu)解，望斧正 →_→

---

前言

何謂「安全域名限制」？

以微信 JS-SDK 的使用為例，每個公眾號被限制最多可設置三個安全域名，且必須能被騰訊服務器所驗證（這意味著域名必須綁定在一臺可被外網訪問的服務器上）；然后只允許在這幾個域名下才能使用 JS-SDK，這就是安全域名限制。

這種策略應用還相對比較廣泛，大概可以等同于三方提供的 API 需要讓你配置 IP 白名單。

下圖大致描述了 JS-SDK 域名驗證的過程，其中

• WeixinWebview 為微信客戶端內的瀏覽器；
• BuServer 為我們自己的業(yè)務服務器；
• WeixinClient 為微信 App；

以下流程的前提是 BuServer 已經具有簽名所需的 access_token、jsapi_ticket 等信息。

建立在這個基礎上，我們想繞過這個安全策略，大概有兩種方案：

常規(guī)操作，將一個固定的域名作為測試專用，填入安全域名列表里，占掉一個坑「這邊當然可以專門申請個測試賬號」，然后通過解決內網穿透「ngrok、花生殼之流」便可以實現；

非常規(guī)操作，通過修改 DNS 解析實現，將特定資源「或所有資源」的請求重寫到本地開發(fā)服務上；

常規(guī)操作

通過 ngrok / 花生殼內網穿透，一般工具都會給你臨時域名，固定的域名需要付費；

將域名填入微信安全域名列表中，并將驗證文件放入 Web 容器里進行驗證；

完成了上面兩步，你就可以愉快的調試啦；

非常規(guī)操作

從上文流程圖中可以看到 JS-SDK config 信息是通過當前請求頁面的 URL jsapi_ticket appid ...... 按照一定規(guī)則進行簽名得到的，然后將這個 config 傳入微信客戶端進行校驗是否合法。

整個驗證過程中，我們能 hack 的是將請求的資源轉發(fā)到開發(fā)服務器上，從而能調試本地的代碼。

圍繞「將請求的資源轉發(fā)到開發(fā)服務器」，可以想到下面兩個方案：

將請求攔截，轉發(fā)到開發(fā)服務器上；

利用 DNS 解析，將安全域名解析到開發(fā)服務器上「俗稱 DNS 劫持」；

方案一 抓包工具轉發(fā)

本文不過多贅述，可以通過 Charles，Fiddler 這些抓包工具對指定的請求進行轉發(fā)，從而達到目的。

方案二 DNS 劫持

可以先看下圖 DNS 解析過程：

要實現 DNS 劫持，最現實的是通過修改開發(fā)機的 hosts 文件將安全域名解析到本地開發(fā)環(huán)境 ip 上。

HTTP 請求的劫持

如果你的網站提供的是 HTTP 服務，只需要修改開發(fā)機中 hosts 文件，將安全域名指向開發(fā)服務。看到這里就差不多了，可以自己去實踐了。

HTTPs 請求的劫持

但是目前大多數商業(yè)網站都 HTTPs 化了，因此并不能簡單的通過 DNS 劫持，把請求轉發(fā)到本地的 HTTP 服務上。

如果你的安全域名是一個 HTTPs 服務，那可能有點麻煩。首先我們來看看一次像 HTTPs Server 請求的時間線：

如上圖可以看到當像 HTTPs Server 發(fā)起一個 HTTP 請求時，將會被永久重定向成 HTTPs 請求，然后響應頭中會有一個特殊的頭「strict-transport-security」，這個頭是告知瀏覽器該域下的所有請求都將使用 HTTPs 訪問。因此接下來如果再發(fā)起一個 HTTP 的請求，瀏覽器將會內部重定向至 HTTPs 請求。

上文對 HTTPs 請求的描述是為了引出當你安全域名對應的是 HTTPs 服務時，會遇到如下問題：

將安全域名 DNS 劫持到本地 HTTP 服務后，在瀏覽器中訪問仍舊是 HTTPs 請求；

基于 1 ，我們想到清瀏覽器緩存，但是微信開發(fā)者工具無法進入 chrome://net-internals/#hsts 清理；

Q1：以 Chrome 為例，進入 chrome://net-internals/#hsts，清除安全策略。

Q2：在微信開發(fā)者工具中，我們并不能進入這個頁面，也就意味著如果安全域名在該工具中有安全策略緩存，則你無法將它劫持到一個 HTTP 服務，「這邊如果有什么方案，可以告訴我」。

為了解決這個問題，我們只能引入終極解決方案，通過一個 HTTPs Server 對請求做一個轉發(fā)，具體流程如下：

ProxyServer 做了兩件事：

• 配置了安全域名對應的 SSL 證書，支持了 HTTPs 請求；
• 將安全域名下的請求轉發(fā)到對應開發(fā)服務上；

如果這個 ProxyServer 是作為一個通用服務存在，則需要考慮如何代理到不同開發(fā)者啟動的開發(fā)服務上。

最開始我們計劃通過 querystring 來制定需要代理到的開發(fā)服務的地址，實際情況是一個頁面中所有依賴該域下的請求都得轉發(fā)，因此 querystring 的方法不能很方便的實現這個功能。

因此最后通過 cookie 來實現這個需求，通過 cookie 指定開發(fā)服務器地址，這樣該域下的所有資源請求都會帶上該 cookie，就能實現自定義轉發(fā)到上游服務了。

最終使用該方案調試微信 JS-SDK 需要做如下兩步：

更改 hosts 文件，將安全域名劫持到代理服務上；

設置 cookie ，指定需要代理到的上游服務；

這樣一來，該代理服務就可以作為通用服務所存在，任何開發(fā)者有繞過安全域名限制做一些調試，都可以使用這個服務。

FAQ

Q1. 常規(guī)操作的優(yōu)劣？

Pros：

步驟比較少，容易搞，適合偶爾需要調試；

Cons：

固定域名要錢?啊，不固定域名又要經常改，但是一個月又只有三次修改機會啊；

微信安全域名池子沒坑怎么辦啊。。。「申請個測試賬號也不是不行，但是這樣后端 access_token、jsapi_ticket 相關接口都得修改」；

不夠通用，其他三方登錄有安全域名設置，并不能復用；

針對 Cons 1 有更優(yōu)解，可以結合 DNS 劫持，在微信后臺綁定安全域名時使用花生殼驗證域名，然后其實不需要再使用花生殼了，可以修改 hosts，將驗證的域名劫持到本地開發(fā)服務，這樣既不用操心 HTTPs 也不用付費要固定域名。有興趣的小伙伴可以嘗試嘗試。

Q2. 非常規(guī)操作又有什么優(yōu)勢？

Pros:

不需要額外的域名，意味著不用改安全域名配置，服務端代碼也不用動；

通用，有類似安全域名策略的三方服務通殺；

對于普通開發(fā)者來說日常開發(fā)調試成本很低，也不需要什么特殊權限；

Cons:

搭建流程相對復雜點，需要服務器資源；

Q3. 真機微信里怎么調試啊？

祭出 Charles，Mac 用 Charles，Win 用 fiddler 開代理，如果是 HTTPs 則還需要配置證書信任，這個步驟本文不再贅述，可自行 Google。

Q4. 怎么申請測試賬號？

https://mp.weixin.qq.com/debug/cgi-bin/sandboxinfo?action=showinfo&t=sandbox/index

小結

解決方案上，常規(guī)方案的額外成本較低，但是在多個開發(fā)者協(xié)同開發(fā)公眾號的情況下，綜合成本較高；非常規(guī)方案比較適合多個開發(fā)者需要調試微信 JS-SDK，一勞永逸。

在整個過程中，其實可以了解到 DNS 劫持的概念、實際應用，以及對 HTTPs 的進一步了解。

最后，如果喜歡可以關注公眾號「茶杯蓋」

更多專業(yè)前端知識，請上 【猿2048】www.mk2048.com

總結

以上是生活随笔為你收集整理的如何在本地开发环境调试微信 JS-SDK的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。