Gitalk 评论登录失败踩坑：CloudFlare Worker 与 Nginx 代理解决方案

五月 24, 2022 2164 6 分钟

起因

博客关于页面没有开通评论，想给文章开通评论区，点击登录功能后发现 GitHub 登录总是失败。

登陆报错登陆报错

问题分析

参考文章

在 Gitalk 的 GitHub 仓库 Issue 区找到了原因：

Gitalk 中使用的 cors-anywhere.herokuapp.com 原本是一个演示用的 CORS 代理，但由于被大量滥用，从 2021 年 1 月 31 日起，用户必须手动访问该网站获取临时访问权限后才能使用。官方建议开发者自行维护一个代理服务。

初步尝试

在 Gitalk 的 Issue 中找到了一个他人分享的在线代理，先尝试使用：

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

我使用的是 zhaoo 主题，在布局模板中找到 gitalk.ejs 文件（其他主题可搜索 gitalk 关键字定位），在模板中添加 proxy 配置：

1
2
3
4
5
6
7
8
9
var gitalk = new Gitalk({
  clientID: '<%= theme.gitalk.clientID %>',
  clientSecret: '<%= theme.gitalk.clientSecret %>',
  id: window.location.pathname,
  repo: '<%= theme.gitalk.repo %>',
  owner: '<%= theme.gitalk.owner %>',
  admin: '<%= theme.gitalk.admin %>',
  proxy: '<%= theme.gitalk.proxy %>',
});

同时在主题的 _config.yml 中也加上对应的 proxy 配置项。

重新部署后发现依然有问题，查看请求响应码为 429（请求过多），推测是白嫖该代理的人太多导致限流。

既然公共代理不可用，那就自己搭一个。

解决方案

方案一：CloudFlare Worker（推荐）

⚠️ 注意：此方案在国内可能被墙。如需稳定使用，推荐参考 cors-server 项目，通过 Vercel 免费部署 Node.js 服务来解决跨域问题。

参考文章

利用 CloudFlare Worker 创建在线代理，无需服务器，也无需搭建 Node.js 服务，只需注册一个 CloudFlare 账号即可，简单方便。

步骤如下：

  1. 注册 CloudFlare 账号

  2. 进入 Workers，创建一个免费的 Worker（免费版每天 10 万次请求，个人使用完全够用）

    创建Workers创建Workers

  3. 填写喜欢的二级域名，创建 Worker

  4. 打开 GitHub 项目的 index.js，复制代码

  5. 清除脚本编辑器中的示例代码，将复制的代码粘贴进去

    💡 注意：代码中可以设置请求的黑白名单。建议将白名单设置为自己的博客域名，避免他人滥用消耗免费额度。若设置为 whitelist = [".*"] 则所有人都可使用。

    编辑脚本编辑脚本

  6. 点击「保存并部署」，部署成功后记下 Worker 域名

  7. 修改 _config.yml 中的 proxy 配置：

    1
    proxy: https://sakura.cherrywhite.workers.dev/?https://github.com/login/oauth/access_token

    ⚠️ 注意：Worker 域名与 GitHub 地址之间必须加 ?，否则会出现 no access token 错误。

  8. 若仍有问题，检查 index.js 中的响应头设置，建议使用：

    1
    2
    myHeaders.set("Access-Control-Allow-Origin", "*");
    // myHeaders.set("Access-Control-Allow-Origin", event.request.headers.get("Origin"));

重新部署博客后，再次点击「使用 Github 登录」，登录成功，评论功能恢复正常！🎉

方案二：Nginx 反向代理

如果你有自己的服务器并使用 Nginx，可以通过配置反向代理来解决跨域问题。

在 Nginx 配置文件中添加以下内容：

1
2
3
4
5
6
7
## Gitalk OAuth 代理
location /github {
    if ($request_method = 'OPTIONS') {
        return 204;
    }
    proxy_pass https://github.com/; ## 注意尾部斜杠不能省略
}

前端请求地址为 https://你的域名/github/login/oauth/access_token，Nginx 会将其转发到 https://github.com/login/oauth/access_token，从而绕过跨域限制。

Gitalk 配置中设置代理：

1
proxy: /github/login/oauth/access_token
查看评论