Gitalk CORS-anywhere CORS跨域请求

解决Gitalk的"Error:Network Error"报错问题，通过自行搭建CORS-anywhere服务

使用服务器自行搭建CORS-anywhere服务

Posted by SmallFang on 2024-08-01
Estimated Reading Time 7 Minutes
Words 1.7k In Total
Viewed Times

问题起源

Gitalk作为一个很受欢迎的无后端博客评论功能插件，其在调用GitHub的API接口时需要使用到用于支持CORS跨域请求的代理服务。由于配置文件中默认使用的CORS-anywhere项目官方提供的演示接口因被滥用而被添加了限制，导致了Gitalk在使用此接口时会崩溃，碰到下图的情况。
1.png

解决

搭建一个自己的CORS-anywhere服务。

注：以下操作需要使用到一台具有公网IP地址的Linux服务器。如果没有，那么这篇文章将不会起到帮助的作用。

第一步：在服务器上配置Git、Node.js和npm

安装Git

如果是Ubuntu/Debian操作系统，那么可以运行下面这几行指令：

1
2
sudo apt-get update
sudo apt-get install git -y

如果是CentOS操作系统，那么可以运行下面这几行指令：

1
2
sudo yum update
sudo yum install git -y

在指令执行完毕后，执行git --version。如果有像下图一样返回版本信息，则说明安装成功。
2.png

配置Node.js和npm

如果是Ubuntu/Debian操作系统，那么可以运行下面这几行指令：

1
2
3
sudo apt-get update
sudo apt-get install nodejs -y
sudo apt-get install npm -y

如果是CentOS操作系统，那么可以运行下面这几行指令：

1
2
3
sudo yum update
sudo yum install nodejs -y
sudo yum install npm -y

在指令执行完毕后，分别执行node -v和npm -v。如果均有像下图一样返回版本信息，则说明配置成功。
3.png

第二步：获取部署项目所需的源码

执行以下命令：

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

此时，已经把项目的官方仓库克隆了下来。

第三步：配置server.js文件

（如果在下面的操作中出现对vim编辑器的使用不明白的地方，可以参考这篇文章：Linux vi/vim）
执行指令vim server.js，将会进入使用vim编辑器编辑配置文件的界面。
双击键盘“d”即可快速清除一整行代码，因此可以通过长按“d”的方式清空配置文件，随后粘贴以下内容：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
// Listen on a specific host via the HOST environment variable
var host = process.env.HOST || '0.0.0.0';
// Listen on a specific port via the PORT environment variable
var port = process.env.PORT || 8080;

// Grab the blacklist from the command-line so that we can update the blacklist without deploying
// again. CORS Anywhere is open by design, and this blacklist is not used, except for countering
// immediate abuse (e.g. denial of service). If you want to block all origins except for some,
// use originWhitelist instead.
var originBlacklist = parseEnvList(process.env.CORSANYWHERE_BLACKLIST);
// Set originWhitelist to allow only github.com and your blog website.
var originWhitelist = ['https://github.com', 'https://yourdomain.com'];
function parseEnvList(env) {
  if (!env) {
    return [];
  }
  return env.split(',');
}

// Set up rate-limiting to avoid abuse of the public CORS Anywhere server.
var checkRateLimit = require('./lib/rate-limit')(process.env.CORSANYWHERE_RATELIMIT);

var cors_proxy = require('./lib/cors-anywhere');
cors_proxy.createServer({
  originBlacklist: originBlacklist,
  originWhitelist: originWhitelist,
  // Remove the requireHeader check to allow all headers
  // requireHeader: ['origin', 'x-requested-with'],
  checkRateLimit: checkRateLimit,
  removeHeaders: [
    'cookie',
    'cookie2',
    // Strip Heroku-specific headers
    'x-request-start',
    'x-request-id',
    'via',
    'connect-time',
    'total-route-time',
    // Other Heroku added debug headers
    // 'x-forwarded-for',
    // 'x-forwarded-proto',
    // 'x-forwarded-port',
  ],
  redirectSameOrigin: true,
  httpProxyOptions: {
    // Do not add X-Forwarded-For, etc. headers, because Heroku already adds it.
    xfwd: false,
  },
}).listen(port, host, function() {
  console.log('Running CORS Anywhere on ' + host + ':' + port);
});

注意：在上述配置文件中找到“var originWhitelist = [‘https://github.com’, ‘https://yourdomain.com’];”这一行代码，按“i”键进入输入模式后将“https://yourdomain.com "改为你自己的博客网站的网址。
然后按“Esc”并输入“:wq”并按“Enter”回车退出编辑。
配置文件编辑完毕。

第四步：启动服务并使用pm2管理服务

执行命令npm install安装依赖项。
然后执行npm install -g pm2安装pm2。
随后执行pm2 start server启动服务。如果出现这个界面，则说明启动成功。
4.png

如果没有出现上述界面而是报错，那大概率是配置文件中所指定的运行端口8080被占用。
我们可以返回到上一步中，将“var port = process.env.PORT || 8080;”这一行所规定的运行端口给修改为8081或其他端口，只要是没被占用的就行。
修改后再运行pm2 start server，应该就可以正常启动服务了。

第五步：放通防火墙

一般服务器在默认情况下是没有配置防火墙的。不过有可能你的服务器默认开启了ufw软件防火墙。执行以下命令以放通对应端口（如果上面修改过端口这里对应也要修改）：

1
ufw allow 8080

假如你在服务器提供商的控制面板那里开启的硬件防火墙，那么请自行放通，不多赘述。

第六步（可选）：用Cloudflare Workers配置反向代理

其实到这一步这项服务已经可以使用了。打开浏览器，访问http://你的服务器IP:8080 ，返回如下结果说明可用：
5.png
但是此时使用的是http传输协议，并且使用需要添加端口，安全性欠佳、也不方便。我们可以通过Cloudflare Workers来反代这项服务，以此实现https并且无需在访问时添加端口。（当然你也可以用nginx进行反代，但是为了操作的简单，我演示使用Cloudflare Workers）

注意：以下操作需要你拥有一个可以托管在Cloudflare的域名。如果没有，这一步操作将无法进行。

打开Cloudflare，注册一个账号。将域名托管到Cloudflare，并解析一个子域名到你刚刚搭建服务使用的服务器。
然后创建一个Worker，进入代码编辑页面。
6.png
7.png
8.png
9.png
10.png
进入这个界面
11.png

清空原有的代码，粘贴一下这一段：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
addEventListener('fetch', event => {
  event.respondWith(handleRequest(event.request))
})

async function handleRequest(request) {
  const url = new URL(request.url)
  const targetUrl = `http://example.com:8080${url.pathname}${url.search}`
  const modifiedRequest = new Request(targetUrl, {
    method: request.method,
    headers: request.headers,
    body: request.body,
    redirect: 'follow'
  })
  const response = await fetch(modifiedRequest)
  return new Response(response.body, response)
}

注意：将上述代码中的"http://example.com "更换成你解析到刚刚配置服务的服务器上的域名。
点右上角部署。
12.png

可以绑定自定义域：
13.png

第七步：将你搭建好的服务接口填写到配置文件中

以我为例，在配置文件中的proxy一栏填入https://我的接口/https://github.com/login/oauth/access_token ：
14.png
随后部署即可解决问题。成效就看本博客的评论系统。

最后

写文章不易，如果有帮助的话就请在此页面的最下方点击“star”按钮进入我的仓库为我点上一颗star吧~

SmallFang的博客网站。欢迎与我联系。邮箱：sfxf09@gmail.com

特色标签
Gitalk CORS-anywhere CORS跨域请求
ESC