web-dev-qa-db-ja.com

クロスオリジンリソースシェアリング（CORS）コンセプト

クロスドメインJavaScriptの概念について質問があります。

選択されたドメインでのみWebサービスを使用できるサーバー（ex Amazon.com）があります。だから間違いなく、彼らのサービスを地元の人から利用しようとしたら、私はできません。私はこれを自分のコンソールで手に入れました

Cross-Origin Request Blocked：Same Origin Policyは、 http://football20.myfantasyleague.com/2014/export?TYPE=rosters&L=52761&W=&JSON= でリモートリソースの読み取りを許可しません。これは、リソースを同じドメインに移動するか、CORSを有効にすることで修正できます。

PS：私もjqueryクロスドメインの方法を使用しましたが、機能しませんでした。

ただし、AmazonのWebサービスを使用するために選択されたドメインに含まれるドメインにJavaScriptが含まれている場合、HTMLに含めると機能します。

<script src="http://example.com"></script>

Ajaxによって応答を取得するメソッドがあります。

私の質問は：

  1. インターネットURLからJavaScriptファイルを参照するとどうなりますか。マシンでローカルコピーを実行していますか？
  2. HttpRequestが作成されており、ドメインまたはxyzとして要求ソースがあります。
javascriptjqueryajaxcors
16
Sashi Kant

重要なメモの前書き：反対側のサーバーがそれを有効にしない場合、あなたができることは何もありませんクロスオリジンajaxリクエストを許可するクライアントサイドコード。

質問に答える前に背景を説明します。

同じ起源のセキュリティポリシー

簡単に言えば、同じ起源のセキュリティポリシーは、あるOriginのスクリプトが他のOriginからコンテンツをフェッチしないようにします。 Originの概念を説明するために、 Same-Origin Security Policyのウィキペディアの記事 の一部を引用します。

次の表に、URL " http://www.example.com/dir/page.html "に対するチェックの典型的な結果の概要を示します。

Compared URL                                             Outcome  Reason
-------------------------------------------------------  -------  ----------------------
http://www.example.com/dir/page2.html                    Success  Same protocol and Host
http://www.example.com/dir2/other.html                   Success  Same protocol and Host
http://username:[email protected]/dir2/other.html Success  Same protocol and Host
http://www.example.com:81/dir/other.html                 Failure  Same protocol and Host but different port
https://www.example.com/dir/other.html                   Failure  Different protocol
http://en.example.com/dir/other.html                     Failure  Different Host
http://example.com/dir/other.html                        Failure  Different Host (exact match required)
http://v2.www.example.com/dir/other.html                 Failure  Different Host (exact match required)
http://www.example.com:80/dir/other.html                 Depends  Port explicit. Depends on implementation in browser.

他のブラウザとは異なり、Internet Explorerは、代わりにセキュリティゾーンを使用して、Originの計算にポートを含めません。

そのため、たとえば、JavaScriptは、元のサーバー以外のWebサーバーから何かをダウンロードすることはできません（別名、HTTP要求を作成します）。これがまさに、他のドメインにXmlHttpRequests（別名AJAX）を作成できない理由です。

CORSは一方向で、反対側のサーバー（ブラウザーのクライアントコードではない）が 同じ-Originポリシーを緩和 =。

Cross Origin Resource Sharing（CORS） についての簡略化された説明。

CORS標準は、サーバーが許可されたOriginドメインにリソースを提供できるようにする新しいHTTPヘッダーを追加することで機能します。ブラウザはこれらのヘッダーをサポートし、設定した制限を尊重します。

例：あなたのサイトはhttp://my-cool-site.comであり、ドメインhttp://third-party-site.comにサードパーティAPIがあるとします。 AJAX。

そして、サーバーmy-cool-site.comからのページがthird-party-site.comにリクエストを行ったと仮定しましょう。通常、ユーザーのブラウザーは、AJAX Same-Origin Security Policy に従って、独自のドメイン/サブドメイン以外のサイトへの呼び出しを拒否します。パーティサーバーはCORSをサポートし、次のことが起こります。

  • ブラウザはOrigin HTTPヘッダーをthird-party-site.comに送信します

    Origin: http://my-cool-site.com

  • サードパーティのサーバーがドメインからのリクエストを受け入れる場合、Access-Control-Allow-Origin HTTPヘッダーで応答します：

    Access-Control-Allow-Origin: http://my-cool-site.com

  • すべてのドメインを許可するために、サードパーティのサーバーは次のヘッダーを送信できます。

    Access-Control-Allow-Origin: *

  • サイトが許可されていない場合、ブラウザはエラーをスローします。

クライアントにかなり最新の CORSをサポートするブラウザー があり、サードパーティのサーバー CORSをサポートしている がある場合、CORSは役に立ちます。

一部の古いブラウザ（たとえばIE8）では、CORSで正しく動作する呼び出しを行うには、XDomainRequestの代わりにMicrosoft固有のXMLHttpRequestオブジェクトを使用する必要があります。これは現在では時代遅れで、最新のブラウザ（Microsoftを含む）はすべて、代わりにXMLHttpRequestでCORSを処理します。ただし、廃止されたブラウザをサポートする必要がある場合は、 このページ で説明しています。

CORSリクエストを行うには、Firefox 3.5以降、Safari 4以降でXMLHttpRequestを使用し、IE8 +でChromeおよびXDomainRequestオブジェクトを使用します。XMLHttpRequestオブジェクトを使用する場合、クロスドメインリクエストを行おうとしていることがブラウザに表示されると、シームレスにCORS動作がトリガーされます。

これは、クロスブラウザCORSオブジェクトの作成に役立つJavaScript関数です。

function createCORSRequest(method, url){
    var xhr = new XMLHttpRequest();
    if ("withCredentials" in xhr){
        // XHR has 'withCredentials' property only if it supports CORS
        xhr.open(method, url, true);
    } else if (typeof XDomainRequest != "undefined"){ // if IE use XDR
        xhr = new XDomainRequest();
        xhr.open(method, url);
    } else {
        xhr = null;
    }
    return xhr;
}

繰り返しますが、これは古いブラウザにのみ必要です。

上記の理由が、スクリプトからAmazonのWebサービスを使用できない理由です。また、Amazonサーバーは、選択したドメインから提供されるページへのJavaScriptファイルのダウンロードのみを許可します。

numbered質問に答えるには：

    • 同じOriginにある場合、ファイルはブラウザによってダウンロードされます。
    • 同じOriginにない場合、CORS要求が成功するとファイルがダウンロードされます。
    • または、スクリプトのダウンロードが失敗します。
    • ダウンロードが成功すると、JavaScriptファイルのコンテンツがブラウザーのメモリに読み込まれ、解釈されて実行されます。

  2. 理解するには、CORSの説明を参照してください。

43
sampathsris

CORSは、サーバー上で変更する必要がある設定です。これにより、外部ドメインからWebページ上のリソースを要求できます。クライアントでコードを変更するだけでは、CORSの機能は変更されません。

「script」タグ内からページにアクセスできる理由は、クロスオリジンリクエストのタグが他のすべてのデータとは異なる方法で処理されるためです。昔は、JSONデータをHTMLタグ内に保存するJSONPを使用して、CORSをシステムに「ハック」することができました。

ApacheでCORSを有効にするには：

最初に入力してhttpd.confを見つけます

ps -ef | grep Apache

これにより、Apacheの場所がわかります。そのタイプを見つけたら：

 <Apache-location> -V

次のようなhttpd.confの正確な場所が返されます。

 -D SERVER_CONFIG_FILE="/etc/Apache2/Apache2.conf"

ここで、httpd.confに移動して「/」と入力し、<directory>。タグを見つけたら、次のように入力します。

Header set Access-Control-Allow-Origin "*"

ファイルを保存し、次のコマンドを実行して構文が正しいことを確認します。

apachectl -t

それがチェックアウトする場合、グレースフルリスタートコマンドを実行します。

apachectl -k graceful

サーバーが再起動すると、外部スクリプトを介してファイルにアクセスできるようになります。

エラーのために構成を保存できない場合は、エディターを終了して次のように入力してみてください。

Sudo chmod 755 httpd.conf

これにより、所有者は構成ファイルにフルアクセスできますが、他のすべてのユーザーは実行ファイルを読み取ることしかできません（ http://en.wikipedia.org/wiki/Chmod ）。

これらの変更をテストするには、外部サーバーで新しいindex.htmlファイルを作成し、次のファイルをロードします。

<!doctype html>
<html>
    <head>
    <title>TEST</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.js"></script>
    <script src="http://code.jquery.com/jquery-1.11.1.js"></script>
    <!-- Insert Scripts & CSS Here -->
    <link rel="stylesheet" type="text/css" href="http://d1e24pw9mnwsl8.cloudfront.net/c/bootstrap/css/bootstrap.min.css">
    </head>

    <body>

        <script>
        jQuery.get('yourwebsite.com/file.csv', function(data) {
        document.write(data);
        });
        </script>

    </body>

</html>

結果の出力は、yourwebsite.com/file.csvのライブデータフィードをミラーリングする必要があります

そのhtmlページをロードしても出力が表示されない場合、firefoxでf12を押して開発者のコ​​ンソールを開きます。ほとんどの場合、エラーが表示されます。

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at yourwebsite.com/file.csv. This can be fixed by moving the resource to the same domain or enabling CORS.

これは、a）httpd.confが正しく構成されなかった/保存されなかった、またはb）Webサーバーの再起動を忘れたことを意味します。

4
Andrew

.htaccessファイルに次の行を追加します。

Header set Access-Control-Allow-Origin *
1
Shafiq