CORS クロスドメインの深い理解 (コード例)

この記事は、CORS クロスドメイン (コード例) について詳しく説明しています。必要な方は参考にしていただければ幸いです。

インタビューでデータのやり取りについて尋ねられると、クロスドメイン処理の処理方法をよく尋ねられます。ほとんどの人は JSONP と答えますが、面接官は「JSONP の欠点は何ですか?」と尋ねます。面接官が GET メソッドをサポートしていると答えた場合、面接官は「JSONP をサポートしている場合はどうなるのですか?」と尋ねます。リクエストを送ればいいのでしょうか？しっかりとした基礎を持つ面接官は、CORS クロスドメインの使用について答えるでしょうが、しっかりとした基礎のない面接官は首を振るかもしれません。

これはまだ終わっていません。会社がより形式的であったり、技術的なスキルを重視していて、あなたが重要なポジションの面接を受けていて、人事部が給与を削減したいと考えている場合は、それを補ってくれるでしょう。 CORS クロスドメインの問題?このとき、「互換性が悪いからIE10ブラウザが必要です」と答えても、相手は言いたいことがあるはずなので、互換性をどうするか。候補者は何も言えなくなり、残ったとしても給与交渉に自信が持てなくなる。

CORS クロスドメインは、面接官が 1 人を合格させるための非常に強力なツールです。

なぜそうなるのでしょうか?

1. CORS リクエストが発生するケースはあまりなく、開発者がこのシナリオを使用することはほとんどなく、ほとんどは JSONP によって処理されます。

2. 開発者自身のスキルは確固たるものではなく、怠け者の考え方があり、技術レベルを向上させる意識や意欲がありません。

3. 関連する学習教材がほとんどなく、純粋なフロントエンド初心者がテスト可能な環境を構築するのは困難です。

この課題を今日、私たちの弱点ではなく、技術力を示すハイライトにできるよう、徹底的に解決していきます。

まず、CORS とは何ですか?

#CORS は W3C の標準であり、正式名は「Cross-ドメイン リソース共有」 (クロスオリジン リソース共有)。

これにより、ブラウザーがクロスオリジン サーバーに XMLHttpRequest リクエストを発行できるようになり、AJAX が同じオリジンからのみ使用できるという制限が克服されます。

利点と欠点

利点:

1.POST とすべての HTTP リクエストをサポート

2.JSOP よりも高いセキュリティ
3フロントエンドで行うべきことは比較的少ないです。

欠点:

1. IE9 以下などの古いバージョンのブラウザとは互換性がありません。

2 サーバーのサポートが必要です。
3. 使い方は少し複雑です。

フロントエンド部分:

nbsp;html>


    <meta>
    <meta>
    <meta>
    <title>CORS跨域请求</title>
    <script>
        function createCORSRequest(method, url) {
            var xhr = new XMLHttpRequest();
            if ("withCredentials" in xhr) {
                xhr.open(method, url, true);
            } else if (typeof XDomainRequest != "undefined") {
                xhr = new XDomainRequest();
                xhr.open(method, url);
            } else {
                xhr = null;
            }
            return xhr;
        }

        window.onload = function () {
            var oBtn = document.getElementById(&#39;btn1&#39;);
            oBtn.onclick = function () {
                var xhr = createCORSRequest("get", "http://wpdic.com/cors.php");
                if (xhr) {
                    xhr.onload = function () {
                        var json = JSON.parse(xhr.responseText);
                        alert(json.a);
                    };
                    xhr.onerror = function () {
                        alert(&#39;请求失败.&#39;);
                    };
                    xhr.send();
                }
            };
        };
    </script>


    <input>

注:

1. 上記のコードは、XDomainRequest

2 を使用するため、IE8 と互換性があります。 XMLHttpRequset として他のコードを使用します。2.0 かどうかは考えずに使用してください。データを送信したい場合は、xhr.send()

4 で実行できます。ここで「単純なメソッド」を勉強することはお勧めしません。クラスの知識については、コードを理解し、それを使用できるようにするだけで十分です。問題が発生したかどうかを確認するのに遅すぎることはありません。

バックエンド部分:

<?php header(&#39;content-type:application:json;charset=utf8&#39;);
header(&#39;Access-Control-Allow-Origin:*&#39;);
header(&#39;Access-Control-Allow-Methods:GET,POST&#39;);
header(&#39;Access-Control-Allow-Credentials: true&#39;);
header(&#39;Access-Control-Allow-Headers:x-requested-with,content-type&#39;);
$str = &#39;{"a":1,"b":2,"c":3,"d":4,"e":5}&#39;; 
echo $str;
?>

注:

1.Access-Control-Allow-Origin:

は、クロスドメイン名を指定する必要がある場合に、任意のドメイン名からのクロスドメインアクセスを許可することを意味します。 -domain access、Access-Control-Allow-Origin:

を Access-Control-Allow-Origin:Allowed ドメイン名に変更するだけです。これは実際の作業でも行う必要があります。 2. Access-Control-Allow-Methods: GET。 , POSTでは許可するメソッドを規定しており、DELETEなどの権限を勝手に手放さないようにすることをおすすめします。フィールドはオプションです。その値は、Cookie の送信を許可するかどうかを示すブール値です。デフォルトでは、Cookie は CORS リクエストに含まれません。 true に設定すると、サーバーは Cookie をリクエストに含めてサーバーに送信することを明示的に許可します。この値は true にのみ設定できます。サーバーがブラウザーに Cookie を送信させたくない場合は、このフィールドを削除してください。

最後に、面接でよくある質問:

CORS と JSONP のアプリケーション シナリオの違いは何ですか?

CORS はブラウザ (IE10 以上) とサーバーからの同時サポートを必要とし、これは基本的なクロスドメイン ソリューションであり、ブラウザによって自動的に完了します。利点は、より強力でさまざまな HTTP メソッドをサポートしていることです。欠点は、互換性が JSONP ほど良くないことです。

以上がCORS クロスドメインの深い理解 (コード例)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。