web-dev-qa-db-ja.com

どこでもCorsを使用してリバースプロキシを作成し、CORSヘッダーを追加する方法

CORSヘッダーを追加するためのこのリバースプロキシのドキュメントを2時間読んでいますが、使用できません。使い方の簡単な例を教えてください。

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が必要かどうか、または正確には何を理解していない

11
Stranger B.

CORS Anywhereは、通常Webブラウザーの同じOriginポリシーによって禁止されている他のWebサイトからのデータへのアクセスに役立ちます。これは、サーバー(この場合はNode.jsで作成)を介してこれらのサイトにリクエストをプロキシすることで行われます。

"APIを使用するには、URLの前にAPI URLを付けます。" 。これですべてです。したがって、http://example.com、あなたはhttps://cors-anywhere.herokuapp.com/http://example.com。 CORS Anywhereは、アプリケーションに代わってリクエストを行い、CORSヘッダーを応答に追加して、Webアプリケーションが応答を処理できるようにします。

質問のスニペットは、必要に応じて、XMLHttpRequestによって生成されたリクエストのURLを自動的に変更します。このスニペットは必須ではありません。CORSAnywhere APIのURLを自分で追加するだけでかまいません デモページで

Githubのリポジトリ( https://github.com/Rob--W/cors-anywhere )には、CORS Anywhereを強化するサーバーのソースコードが含まれています。あなたがフロントエンドの開発者であれば、あなたが知る必要があるのはそれだけです。アプリケーションに多数のユーザーがいる場合は、パブリックCORS Anywhereサーバー上のすべてのリソースを使い果たしないように、自分でCORS Anywhereをホストする必要があります。

21
Rob W

私はロブに延期しますが、これがあなたの質問に対する答えの私の試みです。

(ロブ、この答えを自由に修正してください。そしてCORS Anywhereに感謝します。最近、私は多くの問題を解決しました。)

  1. インストール Node.js
  2. インストール CORS Anywhere

    たとえば、コマンドプロンプトで次のように入力します。

    npm install cors-anywhere

    (このコマンド例では、CORS Anywhereを現在のディレクトリの下のnode_modules\cors-anywhereにインストールします。)

  3. CORS Anywhereを実行します。

    たとえば、コマンドプロンプトで次のように入力します。

    node cors-anywhere.js

CORS Anywhereは、次のようなメッセージで応答します。

Running CORS Anywhere on 127.0.0.1:8080

(IPアドレス127.0.0.1localhostです。ご使用のコンピューター。)

環境変数でポートを指定できますが、cors-anywhere.jsのローカルコピーの値を編集することにしました。

ここで、次のURLでCORS非対応のWebサービスを使用するとします。

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

その元のURLを使用する代わりに、CORS Anywhereドメインとポートを使用し、その後にパスコンポーネントとして元のURLを続けます。

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

(元のURLから先頭のhttp://を省略できます。)

15

これもチェックできます: https://github.com/Zibri/cloudflare-cors-anywhere

無料のcloudflareワーカーにコードをアップロードすることで、3分で自分で作成できます。

0
Zibri