如何使用CORS代理解决“No Access-Control-Allow-Origin header”问题

引言

最近在编写项目过程中又遇到了跨域问题，之前在编写Bilibili评论转图片神器项目过程中也有遇到过，解决办法是采用CORS。而CORS需要浏览器和服务器同时支持，浏览器方面会自动完成，所以关键在于服务器。因为我调用的是第三方API，如果它返回的Access-Control-Allow-Origin头信息不是*或没有添加我的项目地址的话，那我是无法直接获取资料的。所以当时我有写一个Node程序做中间件接口转发。当然，这个Node程序写得很简陋，功能有限，只能处理Bilibili API请求。然后我无意中发现了一个github项目cors-anywhere，它的介绍是这样的：

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

CORS Anywhere

翻译成中文即，CORS Anywhere是一个NodeJS反向代理，它将CORS标头添加到代理请求中。好像正合我意。看了一下用法也挺简单。
比如，平时我们发送API请求是这样的：

const url = "https://example.com"; // site that doesn’t send Access-Control-*
fetch(url)
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))

运行结果当然是浏览器阻止该代码访问来自https://example.com 的响应。而浏览器这样做的原因是，该响应缺少Access-Control-Allow-Origin响应标头。

然后我们稍微修改一下代码：

const proxyurl = "https://cors-anywhere.herokuapp.com/";
const url = "https://example.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://cors-anywhere.herokuapp.com/https://example.com
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))

Note: https://cors-anywhere.herokua... 是CORS Anywhere项目的一个在线Demo

上面这段代码可以成功访问响应，因为我们将请求URL前缀为代理URL，即其更改为https://cors-anywhere.herokua...://example.com， 请求通过该代理取得，然后：

1. 将请求转发到https://example.com。
2. 从https://example.com 接收响应。
3. 将头信息Access-Control-Allow-Origin添加到响应中。
4. 将带有添加的头信息的响应传递回请求的前端代码。
5. 浏览器允许前端代码访问响应。

实测确实可以解决跨域问题，那么我们如何部署属于自己的CORS Anywhere呢？（当然您也可以继续使用https://cors-anywhere.herokua...）

部署

您还可以使用5个命令在2-3分钟内轻松地将您自己的代理部署到Heroku（Heroku是一个支持多种编程语言的云平台即服务）：

git clone https://github.com/Rob--W/cors-anywhere.git
cd cors-anywhere/
npm install
heroku create
git push heroku master

运行完这些命令后，您将最终运行一个属于自己的CORS Anywhere服务器，该服务器位于例如https://circlehotarux-cors-an...。

cors-proxy-server

发现某些API使用cors-anywhere时会遇到403 Forbidden问题，具体如何解决留待以后更新。这里提供一个替代方案——cors-proxy-server，使用方法同cors-anywhere一样，官方提供了一个在线Demo。

const proxyurl = "https://secret-ocean-49799.herokuapp.com/";
const url = "https://example.com"; // site that doesn’t send Access-Control-*
fetch(proxyurl + url) // https://secret-ocean-49799.herokuapp.com/https://example.com
.then(response => response.text())
.then(contents => console.log(contents))
.catch(() => console.log("Can’t access " + url + " response. Blocked by browser?"))

Heroku

没有Heroku？没关系，接下来我将教您如何注册使用Heroku。

首先打开Heroku官网，点击右上角的Sign up

按要求填写好资料，注意填写邮箱填写国外的邮箱，如gmail，使用国内的邮箱可能会注册失败。点击CREATE FREE ACCOUNT后会发送一封验证邮件到您的邮箱，点击邮件中的链接后会跳转到设置密码页面。设置完密码后，就正式完成注册啦！

接着我们来到Heroku Dev Center下载Heroku CLi，这是Heroku的命令行工具，为接下来做准备。选择并安装自己系统对应的安装程序即可。

安装完成后，在你喜欢的位置打开git bash，我们将在这里下载前面所提到的CORS Anywhere项目。

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

然后我们还是在git bash中登陆我们的Heroku账号，输入heroku login -i：

heroku login -i
heroku: Enter your login credentials
Email: [e-mail]
Password: ***************
Two-factor code: ********
Logged in as [e-mail]

接着输入heroku create ${APP name}来创建您的第一个APP，注意，这里创建的APP名是唯一的，也就是如果有人已经使用了您想要的名字，您将无法创建该APP。当然您也可以输入heroku create来创建一个随机名字的APP。

heroku create
Creating app... done, ⬢ sleepy-meadow-81798
https://sleepy-meadow-81798.herokuapp.com/ | https://git.heroku.com/sleepy-meadow-81798.git

最后输入git push heroku master将APP部署到Heroku上。打开上面提供的地址您将看到您所部署的项目，Awesome！

总结

这篇文章帮助您部署属于自己的CORS-Anywhere项目。同时，带领您对Heroku有初步的了解。现在您可以轻松的解决跨域问题啦~