如何在任何地方使用 Cors 来反向代理和添加 CORS 标头

Posted 2023-02-23

【中文标题】如何在任何地方使用 Cors 来反向代理和添加 CORS 标头

【英文标题】：How to use Cors anywhere to reverse proxy and add CORS headers

【发布时间】：2015-06-22 14:56:33

【问题描述】：

我已经阅读了两个小时的反向代理文档以添加 CORS 标头，但我无法使用。你能帮忙举一个简单的例子如何使用它。

CORS-ANYWHERE

我已经在 javascript 中尝试过该示例

(function() 
var cors_api_host = 'cors-anywhere.herokuapp.com';
var cors_api_url = 'https://' + cors_api_host + '/';
var slice = [].slice;
var origin = window.location.protocol + '//' + window.location.host;
var open = XMLHttpRequest.prototype.open;
XMLHttpRequest.prototype.open = function() 
    var args = slice.call(arguments);
    var targetOrigin = /^https?:\/\/([^\/]+)/i.exec(args[1]);
    if (targetOrigin && targetOrigin[0].toLowerCase() !== origin &&
        targetOrigin[1] !== cors_api_host) 
        args[1] = cors_api_url + args[1];
    
    return open.apply(this, args);
;
)();

我真的不明白我是否需要 node.js 或者究竟是什么

【问题讨论】：

是的，您必须在节点服务器上运行该代理。

创建一个包含自述文件中示例的脚本并运行node path/to/script.js。然后在您的页面上，您只需向该服务器发出请求。

这是自述文件中链接的客户端演示：github.com/Rob--W/cors-anywhere/blob/master/demo.html

这个例子用 Get 和 Post 方法很难理解，我只想为一个简单的 URL 应用 CORS-ANYWHERE

【参考方案1】：

CORS Anywhere 有助于访问通常被网络浏览器的同源策略禁止的其他网站的数据。这是通过通过服务器（在本例中用 Node.js 编写）代理对这些站点的请求来完成的。

"To use the API, just prefix the URL with the API URL."。这就是全部。因此，您将请求https://cors-anywhere.herokuapp.com/http://example.com，而不是请求http://example.com。然后，CORS Anywhere 将代表您的应用程序发出请求，并将 CORS 标头添加到响应中，以便您的 Web 应用程序可以处理响应。

如果需要，您问题中的 sn-p 会自动修改 XMLHttpRequest 生成的请求的 URL。这个 sn-p 不是必需的，您可以自己添加 CORS Anywhere API URL，就像 in the demo page 一样。

Github 上的存储库 (https://github.com/Rob--W/cors-anywhere) 包含支持 CORS Anywhere 的服务器的源代码。如果您是前端开发人员，那么您只需要知道这些。如果您的应用程序有很多用户，那么您应该自己托管 CORS Anywhere，以避免占用公共 CORS Anywhere 服务器上的所有资源。

【讨论】：

这似乎已经过时了。我收到此错误：“缺少必需的请求标头。必须指定以下之一：来源，x-requested-with”。事实上，cors-anywhere.herokuapp.com 的说明说我需要修改标题。

@Ryan 这并不过时。 Web 浏览器会为跨域请求自动添加 Origin 标头。如果您使用特殊环境（例如，具有访问外部网站权限的浏览器扩展程序），那么您可能根本不需要外部 CORS 代理。存在服务器端检查以节省资源并阻止不必要地使用代理。如果由于某种原因没有自动添加 Origin 标头，但您确实需要使用代理，请设置 X-Requested-With 请求标头。更多详情请见github.com/Rob--W/cors-anywhere/pull/145#issuecomment-450528241

@Ryan 我在 chrome 控制台中尝试了 youtube url 它不起作用***.com/questions/62006628/…

@Ryan 我使用setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') 解决了这个问题。 （https://robwu.nl/cors-anywhere 中的演示使用了这一行。）

很遗憾，CORS Anywhere 不再是解决方案。由于滥用而不得不停止服务：github.com/Rob--W/cors-anywhere/issues/301

【参考方案2】：

我听从 Rob 的意见，但这是我试图回答您的问题的尝试。

（Rob，请随时更正此答案；感谢 CORS Anywhere。它最近为我节省了很多麻烦。）

安装Node.js。

安装CORS Anywhere。

例如，在命令提示符下，输入：

npm install cors-anywhere

（此示例命令将 CORS Anywhere 安装在当前目录下，node_modules\cors-anywhere。）

在任何地方运行 CORS。

例如，在命令提示符下，输入：

node cors-anywhere.js

CORS Anywhere 会回复如下消息：

Running CORS Anywhere on 127.0.0.1:8080

（IP 地址127.0.0.1 是localhost；您的计算机。）

您可以在环境变量中指定端口，但我选择在 cors-anywhere.js 的本地副本中编辑该值。

现在，假设您要在以下 URL 使用未启用 CORS 的 Web 服务：

http://remote.server.com:8085/service

您使用 CORS Anywhere 域和端口，而不是使用原始 URL，然后使用原始 URL 作为路径组件：

http://localhost:8080/remote.server.com:8085/service

（您可以省略原始 URL 中的前导 http://。）

【讨论】：

感谢格雷厄姆的回答。只是想更新我必须更新的第 3 点。 3. 在任何地方运行 CORS。转到您的节点安装目录并输入C:\cors-anywhere\node_modules\cors-anywhere\lib>npm run start

最好更改 C:\cors-anywhere\node_modules\cors-anywhere\server.js 并运行 node server.js

仅供参考，当我在 API URL 上省略 http 时，它不起作用。它给了我“GET localhost:8085/localhost:8080/rest/api/2/issue/createmeta 404（无效主机）”但是当我点击它时它确实有效，“localhost:8085/http://localhost:8080/rest/api/2/issue/…”

【参考方案3】：

[我意识到我使用的 corsanywhere 与您的不同。我使用这个没有连字符，corsanywhere 而不是 cors-anywhere。因此，如果您愿意，可以尝试这个，因为它似乎仍然可以正常工作：

https://corsanywhere.herokuapp.com/https://api.yelp.com/v3/businesses/search?term=pizza&location=$dallas&sort_by=rating 编辑：好像这个（没有连字符）可能不是正式版，所以谨慎使用。]1