我的博客接入 Gitalk 之后,经常会遇到 Gitalk 登录失败的问题,表现为 Gitalk 组件长时间转圈加载不出来,一段时间后渲染出 Network Error 等字样。

经过研究,发现是因为 Gitalk 在发起跨域请求时,其默认的代理出了问题,详情可见此 issue

raw
https://cors-anywhere.azm.workers.dev/https://github.com/login/oauth/access_token

上面这个跨域代理的域名已经被墙了,在没有科学上网环境或网络环境差的时候就会寄。

于是我们可以自己整一个代理,方案有几种,如果没有云服务器,可以找一些免费的托管平台来搞一个代理,例如 Vercel,可参考这篇文章

不过实际体验了一下,我发现 vercel 的域名好像也被墙了(DNS 污染)。。。

考虑到我的网站是用 Nginx 部署在自己的云服务器上的,并且我的云服务器在境外,可以直连 GitHub,因此我采用了另一种更加方便的方案,即用 Nginx 来转发跨域请求(参考自这篇文章)。

在网站的 Nginx 配置下加一条 location 字段:

nginx
location /github {
    if ($request_method = 'OPTIONS') {
      return 204;
    }
    proxy_pass https://github.com/;
}

然后 nginx -s reload 重新加载配置。

最后只要配置一下 Gitalk 组件,加一个 proxy 参数:

javascript
const gitalk = new Gitalk({
    clientID: 'xxxxxxxxxxxxxxxx',
    clientSecret: 'xxxxxxxxxxxxxxxx',
    body: location.href,
    repo: 'BlogComments',
    owner: 'windshadow233',
    admin: ['windshadow233'],
    createIssueManually: true,
    id: location.pathname,
    distractionFreeMode: false,
    proxy: '/github/login/oauth/access_token'
});