記錄一次 Bug 排查過(guò)程并分享一些經(jīng)驗(yàn)

事情是這樣的，最近發(fā)現(xiàn)我的博客 cuiqingcai.com 的評(píng)論功能出現(xiàn)了問(wèn)題，登錄功能不好用了。經(jīng)過(guò)一番排查，我找到了一些解決方案，在這里記錄一下問(wèn)題排查過(guò)程。

另外這個(gè)排查過(guò)程中可以總結(jié)出一些思路，大家如果碰到類似的問(wèn)題，也可以按照類似的思路來(lái)排查。

友情提示：大家一定要讀到最后或者直接拉到最后，最后內(nèi)容的可能對(duì)你更有價(jià)值。

起因

我的博客最近剛換上了 hexo 框架，于是評(píng)論功能就換成了 Gitalk。但最近發(fā)現(xiàn)登錄功能不好用了，點(diǎn)擊使用 GitHub 登錄總是失敗。

就點(diǎn)擊這個(gè)按鈕的時(shí)候，始終登錄不上去：

于是我就想著手解決一下這個(gè)問(wèn)題。

思路

這里就記錄一下我在排查過(guò)程中碰到的一些坑和解決思路。

首先，登錄失敗的問(wèn)題，第一時(shí)間應(yīng)該去排查的就是網(wǎng)絡(luò)請(qǐng)求，打開(kāi)控制臺(tái)，查看 Network 面板，出現(xiàn)類似的結(jié)果：

網(wǎng)絡(luò)請(qǐng)求直接 403 了，拿不到 token 了，于是就登錄不上了。

觀察下，這個(gè)鏈接 cors-anywhere 似乎是用來(lái)解決跨域限制的，后面還跟了一個(gè) GitHub 的 Access Token 獲取地址，那沒(méi)跑了，前面這個(gè)就是一個(gè)反向代理，后面是真實(shí)的請(qǐng)求 URL。

OK，看著這個(gè)也沒(méi)啥思路啊，然后接著怎么辦？

那就接著去搜這個(gè) cors-anywhere.herokuapp.com，因?yàn)?herokuapp 很眼熟嘛，就是一個(gè)公用的網(wǎng)址 Host 平臺(tái)，類似于 AWS、Azure 之類的，那么前面這個(gè)可能包含某些信息。萬(wàn)一是開(kāi)源的那就好辦了。

接著搜，cors-anywhere，然后就搜到了這個(gè)：https://github.com/Rob--W/cors-anywhere

介紹如下：

“

CORS Anywhere is a NodeJS proxy which adds CORS headers to the proxied request.

The url to proxy is literally taken from the path, validated and proxied. The protocol part of the proxied URI is optional, and defaults to "http". If port 443 is specified, the protocol defaults to "https".

This package does not put any restrictions on the http methods or headers, except for cookies. Requesting user credentials is disallowed. The app can be configured to require a header for proxying a request, for example to avoid a direct visit from the browser.

”

真是一個(gè)開(kāi)源框架，和我猜的一樣，就是一個(gè)解決跨域問(wèn)題而生的反向代理。

然后我就在它的 README 中看到了這個(gè)：

好家伙，這不就是我剛才用到的鏈接嗎？

那肯定是這個(gè)玩意出了什么毛病。

咋看呢？這個(gè)果斷就是找 Issue 了：

一看，太明顯了：

“

PSA: Public demo server (cors-anywhere.herokuapp.com) will be very limited by January 2021, 31st

”

意思就是從今年 1.31 開(kāi)始這個(gè)網(wǎng)站的訪問(wèn)會(huì)受限，點(diǎn)進(jìn)去看看：

“

The demo server of CORS Anywhere (cors-anywhere.herokuapp.com) is meant to be a demo of this project. But abuse has become so common that the platform where the demo is hosted (Heroku) has asked me to shut down the server, despite efforts to counter the abuse (rate limits in #45 and #164, and blocking other forms of requests). Downtime becomes increasingly frequent (e.g. recently #300, #299, #295, #294, #287) due to abuse and its popularity.

To counter this, I will make the following changes:

1. The rate limit will decrease from 200 (#164) per hour to 50 per hour.
2. By January 31st, 2021, cors-anywhere.herokuapp.com will stop serving as an open proxy.
3. From February 1st. 2021, cors-anywhere.herokuapp.com will only serve requests after the visitor has completed a challenge: The user (developer) must visit a page at cors-anywhere.herokuapp.com to temporarily unlock the demo for their browser. This allows developers to try out the functionality, to help with deciding on self-hosting or looking for alternatives.

”

好吧，意思就是說(shuō)這個(gè)網(wǎng)站本來(lái)是演示用的，但是現(xiàn)在已經(jīng)被濫用了，然后從 1.31 開(kāi)始用戶手動(dòng)必須手動(dòng)先訪問(wèn)這個(gè)網(wǎng)站獲取臨時(shí)的訪問(wèn)權(quán)限，然后才能使用。另外推薦開(kāi)發(fā)者自己來(lái)維護(hù)一個(gè)網(wǎng)站。

接著下面的評(píng)論第一個(gè)就更滑稽了：

這個(gè)人直接艾特了 gitalk，哈哈哈，因?yàn)?Gitalk 就如剛才所說(shuō)的那樣，也用了這個(gè)。

那就順便去 Gitalk https://github.com/gitalk/gitalk，逛一下 issue，看看是不是也有人遇到了同樣的問(wèn)題，果不其然了：

最近幾個(gè) issue 都是關(guān)于 403 的，真熱鬧。

點(diǎn)進(jìn)去看看，有個(gè)大收獲，里面有個(gè)好心人說(shuō)：

“

這次直接去嫖了一個(gè)CORS proxy,把gitalk.js的6794行改為 proxy: 'https://netnr-proxy.cloudno.de/https://github.com/login/oauth/access_token', 就可以了。具體能用多久我也沒(méi)普，且用且珍惜。

”

真是得來(lái)全不費(fèi)功夫，本來(lái)還想著自己部署著，這次那就換了就行了。

然而，這樣不行，得需要改 gitalk.js 的源碼，并不太好吧。

好，這時(shí)候就遇到了一個(gè)問(wèn)題，要修改某些開(kāi)源軟件的源碼應(yīng)該怎么辦？

首選的思路當(dāng)然不是硬改，改了之后還要自己 host 一個(gè)新的 js 文件，那顯然是很費(fèi)精力的。

其實(shí)一半程序在編寫的時(shí)候應(yīng)該是預(yù)留一些接口和配置的，我們應(yīng)該能很輕易地通過(guò)某些配置就能實(shí)現(xiàn)某些配置的復(fù)寫。

那就接著看看吧，既然要改，那就得先看看 Gitalk 是怎么用的吧。

看文檔，Gitalk 調(diào)用方式如下：

const?gitalk?=?new?Gitalk({
??clientID:?'GitHub?Application?Client?ID',
??clientSecret:?'GitHub?Application?Client?Secret',
??repo:?'GitHub?repo',??????//?The?repository?of?store?comments,
??owner:?'GitHub?repo?owner',
??admin:?['GitHub?repo?owner?and?collaborators,?only?these?guys?can?initialize?github?issues'],
??id:?location.pathname,??????//?Ensure?uniqueness?and?length?less?than?50
??distractionFreeMode:?false??//?Facebook-like?distraction?free?mode
})

gitalk.render('gitalk-container')

看來(lái)這個(gè)在聲明的時(shí)候是有參數(shù)的，那剛才 URL 配置沒(méi)看到在哪里配啊，既然如此，那就看看 Gitalk 這個(gè)對(duì)象支持多少參數(shù)吧。

接著就去找 Gitalk 的構(gòu)造參數(shù)說(shuō)明，找到這么一個(gè)：

• proxy：String

Default: https://cors-anywhere.herokuapp.com/https://github.com/login/oauth/access_token.

果然找到了，所以這里如果我們要修改，那就改 proxy 參數(shù)就行了，初始化 Gitalk 的時(shí)候復(fù)寫掉 proxy 就行。

OK，基本思路有了，那我怎么改到我的源碼里呢？

我的博客是基于 Hexo 的 Next 主題的，根據(jù)經(jīng)驗(yàn)，Gitalk 是 Next 主題自帶的，所以 Gitalk 的聲明應(yīng)該就在 Next 主題源碼里面。

那怎么找呢？

這時(shí)候就需要借助于一些搜索技巧了，搜什么？既然要用 Gitalk，那一定有剛才初始化的調(diào)用，那就搜 Gitalk 這個(gè)關(guān)鍵字就行了。另外還需要縮小一下搜索范圍。

于是我就把范圍限定到了 next 主題目錄，搜索 Gitalk。

簡(jiǎn)直不要太舒服，一搜就有了，文件是 themes/next/layout/_third-party/comments/gitalk.swig。

這里我們只需要把 proxy 參數(shù)加上不就行了，值是什么呢？仿照寫就行了，配置風(fēng)格保持統(tǒng)一，那就加一條：

proxy???????:?'{{?theme.gitalk.proxy?}}',

OK，那這個(gè)配置的值很明顯是主題配置文件，那就把配置文件里面加上 proxy 這個(gè)參數(shù)就好了。

找到 themes/next/_config.yml，添加行：

proxy:?https://netnr-proxy.cloudno.de/https://github.com/login/oauth/access_token

結(jié)果如下：

好了，大功告成！

重新部署 Hexo，現(xiàn)在評(píng)論又能重新使用了，問(wèn)題就解決了！

測(cè)試地址：https://cuiqingcai.com/message/，大家來(lái)給我留言吧～

好了，這就是我排查問(wèn)題的整個(gè)過(guò)程，做一下記錄。

經(jīng)驗(yàn)

另外，其實(shí)這篇文章的用意不僅僅是單純解決這個(gè)問(wèn)題，因?yàn)檫@個(gè)問(wèn)題大家可能并沒(méi)有遇到過(guò)，因此這個(gè)解決方案僅僅是給極少數(shù)遇到這個(gè)問(wèn)題的朋友提供的。

但是，這并不代表這篇文章沒(méi)有價(jià)值，因?yàn)槠渲杏械乃悸肥峭ㄓ玫模谶@里稍微做一下總結(jié)，希望對(duì)大家有幫助：

• 當(dāng)遇到網(wǎng)頁(yè)功能異常的時(shí)候，排查問(wèn)題就主要看兩個(gè)——控制臺(tái)、網(wǎng)絡(luò)請(qǐng)求，這里面往往能找到主要問(wèn)題。
• 結(jié)合一些基本知識(shí)進(jìn)行合理的推斷，比如剛才我就推斷了 cors- anywhere 的作用并結(jié)合 herokuapp 推斷這個(gè)可能還會(huì)是個(gè)公用的服務(wù)。
• 當(dāng)碰到?jīng)]有思路或者不確定的時(shí)候，去谷歌它！不要百度，另外還可以在 GitHub 或者 Gitee 上搜。
• 如果找到對(duì)應(yīng)的 GitHub 倉(cāng)庫(kù)，Issue 區(qū)往往能找到一些有效答案，比如剛才我就在 Issue 區(qū)找到了一個(gè)可替代的 cors 網(wǎng)站。
• 修改代碼功能的時(shí)候要想著盡量復(fù)寫，也就是 overwrite，而不是直接改，前者更具有靈活性，而且某些情況下會(huì)省去一些麻煩。
• 復(fù)寫的時(shí)候去找一些參數(shù)配置，比如找一些初始化參數(shù)、默認(rèn)參數(shù)配置，看看能否實(shí)現(xiàn)改寫的需求。
• 找不到入口的時(shí)候善用全局搜索功能，比如剛才 Gitalk 找哪里調(diào)用的時(shí)候，就直接全局搜索。
• 根據(jù)功能限制某些搜索范圍，比如剛才我就知道 Gitalk 這個(gè)功能是 Next 主題提供的，所以我就直接限制搜索范圍是 Next 主題的源碼。
• 以上步驟多嘗試，熟能生巧。