Javascript 如何在任何地方使用 Cors 进行反向代理并添加 CORS 标头

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/29670703/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-23 03:45:45  来源:igfitidea点击:

How to use Cors anywhere to reverse proxy and add CORS headers

javascriptcorscors-anywhere

提问by Stranger B.

I've been reading for two hours the documentation of this Reverse proxy to add CORS headers, and I'm not able to use. Can you please help with a simple example how to use that.

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

CORS-ANYWHERE

CORS-无处不在

I've tried that example in a javascript

我已经在 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);
};
})();

I don't understand really if I need node.js or what exactly

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

回答by Rob W

CORS Anywhere helps with accessing data from other websites that is normally forbidden by the same origin policy of web browsers. This is done by proxying requests to these sites via a server (written in Node.js, in this case).

CORS Anywhere 有助于从其他网站访问数据,而这些数据通常被 Web 浏览器的同源策略禁止。这是通过通过服务器(在这种情况下用 Node.js 编写)将请求代理到这些站点来完成的。

"To use the API, just prefix the URL with the API URL.". That's really all of it. So, instead of requesting http://example.com, you will request https://cors-anywhere.herokuapp.com/http://example.com. CORS Anywhere will then make the request on behalf of your application, and add CORS headers to the response so that your web application can process the response.

“要使用 API,只需在 URL 前面加上 API URL。” . 这真的就是全部。因此,http://example.com您将请求,而不是请求https://cors-anywhere.herokuapp.com/http://example.com。然后,CORS Anywhere 将代表您的应用程序发出请求,并将 CORS 标头添加到响应中,以便您的 Web 应用程序可以处理响应。

The snippet from your question automatically modifies the URL for requests generated by XMLHttpRequestif needed. This snippet is not required, you can just prepend the CORS Anywhere API URL yourself, as done in the demo page.

XMLHttpRequest如果需要,您问题中的代码段会自动修改生成的请求的 URL 。此代码段不是必需的,您可以自己添加 CORS Anywhere API URL,如演示页面中所做的那样。

The repository on Github (https://github.com/Rob--W/cors-anywhere) contains the source code of the server that powers CORS Anywhere. If you are a front-end dev, then that's all you need to know. If your application has many users, then you should host CORS Anywhere yourself, to avoid eating up all resources on the public CORS Anywhere server.

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

回答by Graham Hannington

I defer to Rob, but here is my attempt at an answer to your question.

我尊重 Rob,但这是我试图回答你的问题。

(Rob, please feel free to correct this answer; and thank you for CORS Anywhere. It recently saved me a heap of trouble.)

(Rob,请随时更正这个答案;感谢 CORS Anywhere。它最近帮我省了一大堆麻烦。)

  1. Install Node.js.
  2. Install CORS Anywhere.

    For example, at a command prompt, enter:

    npm install cors-anywhere

    (This example command installs CORS Anywhere under the current directory, in node_modules\cors-anywhere.)

  3. Run CORS Anywhere.

    For example, at a command prompt, enter:

    node cors-anywhere.js

  1. 安装Node.js的
  2. 随处安装CORS

    例如,在命令提示符下,输入:

    npm install cors-anywhere

    (此示例命令在当前目录下安装 CORS Anywhere,在node_modules\cors-anywhere.)

  3. 在任何地方运行 CORS。

    例如,在命令提示符下,输入:

    node cors-anywhere.js

CORS Anywhere responds with a message like this:

CORS Anywhere 响应如下消息:

Running CORS Anywhere on 127.0.0.1:8080

(The IP address 127.0.0.1is localhost; your computer.)

(IP 地址127.0.0.1localhost;您的计算机。)

You can specify the port in an environment variable, but I chose to edit the value in my local copy of cors-anywhere.js.

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

Now, suppose you want to use a non-CORS-enabled web service at the following URL:

现在,假设您想在以下 URL 使用非 CORS 启用的 Web 服务:

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

Instead of using that original URL, you use the CORS Anywhere domain and port, followed by the original URL as the path component:

您不使用原始 URL,而是使用 CORS Anywhere 域和端口,后跟原始 URL 作为路径组件:

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

(You can omit the leading http://from the original URL.)

(您可以省略http://原始 URL的前导。)

回答by Zibri

You can also check this out: https://github.com/Zibri/cloudflare-cors-anywhere

你也可以看看这个:https: //github.com/Zibri/cloudflare-cors-anywhere

You can make your own in 3 minutes uploading the code to a free cloudflare worker!

您可以在 3 分钟内制作自己的代码,将代码上传到免费的 cloudflare 工作人员!