在网页开发中面对 CORS 限制可能会让你感到沮丧。我们的 CORS 代理服务器博客将为你带来有用的见解和实际的解决方案,以改善你的开发流程。

CORS 代理服务器:您的网络项目的终极解决方案
指数

CORS Proxy Server 是什么?

CORS即跨源资源共享Cross-Origin Resource Sharing),是一种由浏览器实现的机制,用于增强 Web 应用的安全性。它确保网页只能向同源服务器发送请求。简单来说,CORS 阻止网页随意从与自身不同的 URL 获取数据。

CORS Proxy Server
CORS Proxy Server

当一个网站尝试发送数据请求时,浏览器会在请求中附加一个 “Origin” 头。如果请求发送到同源(即相同的 URL),浏览器会允许该请求。但如果请求发送到不同源,浏览器会阻止该请求。

CORS 代理服务器就像浏览器与目标服务器之间的一座中间桥梁,目标服务器上存放着你想访问的内容。如果你曾遇到 “CORS 错误,那意味着浏览器因为 CORS 规则阻止了你访问来自其他服务器的内容。

这正是 CORS 代理服务器发挥作用的时刻。它会将浏览器的请求转发到目标服务器,接收响应后,再附上适当的 CORS 头返回给浏览器。这样,你就可以访问那些本不支持 CORS 的服务器内容,而不会遇到烦人的错误。

使用 CORS 代理服务器的好处

Web 应用和开发者在访问来自不同域的内容或资源时,经常会受到 CORS 规定的限制。这时,CORS 代理服务器就发挥了作用,为突破这些限制提供了解决方案。以下是一些主要的好处:

Bypassing CORS Restrictions
Bypassing CORS Restrictions

绕过 CORS 限制

CORS 代理服务器最重要的优点之一就是能够绕过与 CORS 相关的阻拦。只需在 URL 上进行小小的修改,你就可以从原本会被同源策略阻止的不同域获取数据。这意味着网站可以从多个来源收集数据或内容,而不受浏览器限制。

支持跨源请求

CORS 代理服务器简化了发送跨源请求的过程。当一个 Web 应用需要从其他域获取数据时,代理服务器会进行处理:它接收请求,添加必要的 CORS 头,然后将请求转发到目标服务器。整个过程无缝进行,确保 Web 应用可以轻松从多个来源获取数据。

提升 Web 应用的灵活性与能力

Web 应用本身需要灵活性以便发展。CORS 代理服务器通过允许访问来自不同域的多种资源来扩展这种能力。这不仅提升了应用的功能,还使集成更加丰富多样。通过为多域之间的安全交互提供便利,代理服务器为构建更具创造性和动态性的 Web 体验提供了机会。

CORS 代理服务器的设置方法

设置 CORS 代理服务器听起来可能很复杂,但将整个过程拆分成几个步骤后,就会变得容易得多。以下是帮助你自行搭建 CORS 代理服务器的详细指南:

CORS 代理服务器的设置方法
CORS 代理服务器的设置方法

选择托管平台

第一步是决定你想将代理服务器部署在哪个平台。一些常用的云服务提供商包括:

  • AWS (Amazon Web Services)
  • Google Cloud Platform
  • Heroku

每个平台都有其独特的优势,你应根据自身需求选择最合适的平台。

创建项目

创建一个新的项目文件夹,然后进入该文件夹,并使用以下命令初始化 package.json 文件:

npm init

安装所需的库

为了让代理服务器正常运行,你需要一些支持包。对于一个简单的 CORS 代理服务器,cors-anywhere是常用选择。可通过以下命令安装:

npm install cors-anywhere

构建服务器

创建一个新文件,例如 server.js。在文件中编写代码以处理传入请求并进行转发。使用 cors-anywhere 包可以更方便地处理 CORS 头。

示例:

const cors_proxy = require(‘cors-anywhere’);

 

const host = process.env.HOST || ‘0.0.0.0’;

const port = process.env.PORT || 8080;

 

cors_proxy.createServer({

               originWhitelist: [],  // This allows all origins

               requireHeader: [‘origin’, ‘x-requested-with’],

               removeHeaders: [‘cookie’, ‘cookie2’]

}).listen(port, host, () => {

               console.log(`CORS Anywhere server running on ${host}:${port}`);

});k

部署服务器

服务器配置完成后,下一步是进行部署。如果使用 Heroku,可以通过 Heroku CLI 直接部署。请确保已根据所选平台配置好相关参数。

将请求重定向到你的代理服务器

最后,修改前端代码,使请求通过你刚创建的代理服务器发送。从此,所有请求都会通过该代理服务器的 URL 进行处理。

免费的 CORS 代理服务器

有时,绕过同源策略以执行 AJAX 请求对于 Web 开发者来说是必要的,尤其是在集成第三方服务时。幸运的是,有一些免费的 CORS 代理服务可以提供支持:

免费的 CORS 代理服务器
免费的 CORS 代理服务器

CorsProxy.io

CorsProxy.io 提供了一项免费且高效的代理服务,旨在无缝解决 CORS 错误。使用该服务时,只需在你想访问的 URL 前添加代理前缀 https://corsproxy.io/。这样,CorsProxy.io 会代表你的应用向该 URL 发起请求,同时确保正确使用所需的 CORS 头。

crossorigin.me

该服务允许开发者在无需拥有或管理目标网站的情况下,访问来自不同网站的资源。

HTMLDriven

HTMLDriven 的构建目标是支持对第三方服务的标准 AJAX 请求,成为一个专注于代理请求的清晰工具。虽然该服务提供通过 Composer 的安装方式,但 HTMLDriven 也有一个非常轻量的在线版本,可以直接在主页上使用,方便地执行简单请求。

thingproxy

thingproxy 支持处理 CORS HTTPS 请求相关的问题,同时提供开源代码,并在 freeboard.io 提供免费代理服务。该工具适合小型 API 调用,限制每个请求和响应的长度为 100,000 个字符,每个 IP 地址每秒最多 10 个请求。因此,它更适合用于测试,而不适合在生产环境中长期使用。

allOrigins

allOrigins 是一个专门的 JavaScript 代理,允许以 JSON/P 格式或原始格式获取内容供客户端使用。对于需要从外部资源和网站获取数据的服务(例如从 Wikipedia.org 获取数据而无需使用官方 API)来说,这是一个理想选择。虽然它仅适用于较为特定的场景,但在这些应用中表现出色,使其成为值得考虑的选项。

Taskcluster

Taskcluster 包含多个不同的服务,其中包括一个支持 Taskcluster 服务 CORS 请求的 CORS 代理。该代理允许使用 URL、方法、头信息、数据以及 rejectUnauthorized 头。然而,需要注意的是,该项目已停止开发,GitHub 上的仓库已被标记为 “archived”。因此,尽管它仍可使用,但应被视为临时解决方案,而非长期选项。

常见问题 

使用 CORS 代理服务器安全吗?

在配置和维护了适当的安全设置后,使用 CORS 代理服务器可以被认为是安全的。不过,你仍需保持对最佳安全实践的更新,并定期检查相关配置。

CORS 代理服务器仅用于 Web 开发吗?

主要情况下,CORS 代理服务器用于 Web 开发,以绕过 CORS 限制。但在此之外,它们仍有其他应用,例如数据抓取(data scraping)或在缺少必要 CORS 头时进行的集成任务。

使用 CORS 代理会影响性能吗?

会的。因为每个请求都需要经过代理服务器,这可能会带来额外的延迟。影响程度取决于代理服务器的性能,以及客户端、代理和目标服务器之间的地理距离。

如何保障我的 CORS 代理服务器的安全?

应仅允许可信用户和系统访问代理服务器。定期为软件应用补丁和更新。检查并验证所有传入请求,同时实施速率限制(rate-limiting)以防止滥用。此外,密切监控网络流量,并对任何异常活动设置警报。

CORS 代理服务器有何限制?

虽然 CORS 代理服务器在绕过 CORS 限制方面有效,但它并非为处理更复杂的任务而设计,例如在多个域上管理 cookie session。此外,CORS 代理也无法解决与内容安全策略(CSP)或其他特定安全头相关的问题。

结论

总的来说,CORS 代理服务器是你在应对跨源资源共享(CORS)机制带来的挑战时的得力助手。它为 Web 开发开辟了更多可能,使你能够轻松访问资源并消除限制。在本文中,我们介绍了 CORS 代理服务器的优势、一些免费选项,以及如何自行部署服务器的指南。不过,这仅仅是探索瞬息万变的 Web 技术世界的起点。

为了持续掌握并提升知识,请继续关注 9Proxy 的其他有价值文章。让我们一同探索并揭示数字世界的精华!