heroku反向代理gitalk解决403问题

Gitalk 403 问题

Gitalk评论系统在登录github时显示error: request failed with status code 403。这是因为 gitalk 在访问 github 时为了解决跨域问题而使用了一个反向代理，这个默认的反向代理近期限制了访问，所以无法使用了。

在网上找了好几个反向代理地址，但是都不好用，因此决定自己建一个反向代理服务器。教程分为两个部分，第一部分是服务器端的配置，第二部分是hexo网站的配置。

服务器端

这里用到了开源项目CORS Anywhere，这个项目可以直接在heroku上运行。

注册heroku帐号

首先需要到heroku官网注册帐号，注册和验证的过程可能需要用到不可描述的工具。

下载安装Hero CLI

Hero CLI需要用到git，如果没有装git，请看这里

• Git installation
• First-time Git setup

在Linux上安装heroku-cli比较简单，只需要运行

curl https://cli-assets.heroku.com/install.sh | sh

对于arch系Linux，还可以用AUR安装

yay -S hero-cli

下载安装CORS Anywhere

运行git clone

git clone https://github.com/Rob--W/cors-anywhere.git

进入cors-anywhere目录，安装依赖包

cd cors-anywhere
npm i

部署CORS Anywhere

登录heroku-cli

heroku login -i

在CORS Anywhere目录下创建新的app

hero create [app名称] #app名称留空会使用随机名称

将CORS Anywhere推送到heroku上

git push heroku master

这时候安装部署完成，可以看到部署完成后的heroku app地址，复制下来一会儿要用到。

Hexo配置

主题文件修改

不同的主题可能有不同的修改方式，这里修改的是pure主题。主要做了以下更改：

• 将gitalk修改为最新版本
• 修改var gitalk增加proxy值

打开/layout/_common/head.ejs文件，找到

<link rel="stylesheet" href="//cdn.jsdelivr.net/npm/gitalk@1.4.0/dist/gitalk.min.css">

修改为

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.css">

这样Pure主题可以用到最新的gitalk版本。

打开/layout/_script/_comment/gitalk.ejs，修改两处

@@ -1,6 +1,6 @@
 <% if (typeof(script) !== 'undefined' && script) { %>
   <!-- <link rel="stylesheet" href="https://unpkg.com/gitalk/dist/gitalk.css"> -->
-  <script src="//cdn.jsdelivr.net/npm/gitalk@1.6.2/dist/gitalk.min.js"></script>
+  <script src="//cdn.jsdelivr.net/npm/gitalk@1.7.2/dist/gitalk.min.js"></script>
   <script src="//cdn.jsdelivr.net/npm/blueimp-md5@2.10.0/js/md5.min.js"></script>
   <script type="text/javascript">
   var gitalk = new Gitalk({
@@ -12,7 +12,8 @@
     id: md5(location.pathname),
     distractionFreeMode: true,
     language: '<%= theme.comment.gitalk.language %>',
-    enableHotKey: '<%= theme.comment.gitalk.enableHotKey %>'
+    enableHotKey: '<%= theme.comment.gitalk.enableHotKey %>',
+    proxy: '<%= theme.comment.gitalk.proxy %>'
   })
   gitalk.render('comments')
   </script>

gitalk@1.6.2改成gitalk@1.7.2以使用最新版本gitalk，var gitalk变量增加一条内容proxy: '<%= theme.comment.gitalk.proxy %>'，注意上一条内容后面加,

修改主题配置

在pure主题配置文件中增加proxy地址，不同的主题gitalk位置可能不同。

打开_config.pure.yaml文件，在gitalk里增加proxy地址

gitalk: # gitalk. https://gitalk.github.io/
    owner: #必须. GitHub repository 所有者，可以是个人或者组织。
    admin: #必须. GitHub repository 的所有者和合作者 (对这个 repository 有写权限的用户)。
    repo:  #必须. GitHub repository.
    ClientID:  #必须. GitHub Application Client ID.
    ClientSecret:  #必须. GitHub Application Client Secret.
    proxy: https://[heroku app 地址]/https://github.com/login/oauth/access_token

这样Hexo就修改完了，重新生成和部署Hexo站点到Github，尝试登录Gitalk。

总结

Gitalk 403 问题是默认的反向代理地址失效造成的，通过使用heroku自建反向代理服务解决Gitalk 403问题。