关于前端:如何使用CORS代理解决No-AccessControlAllowOrigin-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…。

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: me@example.com
Password: ***************
Two-factor code: ********
Logged in as me@heroku.com

接着输出 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 有初步的理解。当初您能够轻松的解决跨域问题啦~