关于前端:如何使用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有初步的理解。当初您能够轻松的解决跨域问题啦~