Ajax は CORS レスポンスヘッダーを設定してクロスドメインの問題を解決し、クロスドメインのケーススタディを実現します。

1. クロスドメインを実現するためにCORSレスポンスヘッダーを設定する

クロスオリジンリソース共有 (CORS)

1.1 CORSとは何か

CORS (Cross-Origin Resource Sharing)、クロスオリジンリソース共有。 CORS は公式のクロスドメインソリューションです。クライアント側で特別な操作を必要とせず、サーバー側で完全に処理されるのが特徴です。get リクエストと post リクエストをサポートします。クロスオリジンリソース共有標準では、一連の HTTP ヘッダーフィールドが追加され、サーバーはブラウザーを通じてどのオリジンがどのリソースにアクセスできるかを宣言できるようになります。

1.2 CORS はどのように機能しますか?

CORS は、リクエストがドメインをまたぐことが許可されていることをブラウザに伝えるために、レスポンスヘッダーを設定します。レスポンスを受信すると、ブラウザはレスポンスを解放します。

1.3 CORS は何の目的で使用されますか?

ここに画像の説明を挿入

ajaxデモ.html

<!DOCTYPE html>
<html lang="ja">

<ヘッド>
    <メタ文字セット="UTF-8">
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0">
    <title>CORS</title>
    <スタイル>
        ＃結果 {
            幅: 200ピクセル;
            高さ: 100px;
            境界線: 実線 1px #90b;
        }
    </スタイル>
</head>

<本文>
    <button>リクエストを送信</button>
    <div id="結果"></div>
    <スクリプト>
        const btn = document.querySelector('ボタン');

        btn.onclick = 関数（）{
            //1. オブジェクトを作成する const x = new XMLHttpRequest();
            //2. 初期化設定 x.open("GET", "http://127.0.0.1:8080/cors-server");
            //3. 送信 x.send();
            //4. イベントをバインドする x.onreadystatechange = function () {
                (x.readyState === 4)の場合{
                    (x.status >= 200 && x.status < 300) の場合 {
                        document.getElementById('result').innerText = x.response;
                    }
                }
            }
        }
    </スクリプト>
</本文>

</html>

ここに画像の説明を挿入

サーバー.js

//1. エクスプレスをインポートする
定数 express = require('express');

//2. アプリケーション オブジェクトを作成する const app = express();
 
//3. ルーティングルールを作成する // request はリクエストメッセージのカプセル化です // response はレスポンスメッセージのカプセル化です app.all('/cors-server', (request, response)=>{
    // レスポンス ヘッダーを設定します response.setHeader("Access-Control-Allow-Origin", "*"); // すべてのクロスドメイン リクエストを許可します* 
    // response.setHeader("Access-Control-Allow-Origin", "http://127.0.0.1:5500"); // 指定されたリクエストがドメイン間をまたぐことを許可する // response.setHeader("Access-Control-Allow-Headers", '*'); // カスタム リクエスト ヘッダー タグを許可する // response.setHeader("Access-Control-Allow-Method", '*'); // すべてのリクエストがドメイン間をまたぐことを許可する *
    // response.setHeader("Access-Control-Allow-Method", 'get'); // ドメインを越えた get リクエストを許可する response.send('hello CORS');
});


//4. サービスを開始するためのリスニングポート app.listen(8080, () => {
    console.log("サービスが開始されました。ポート 8080 がリッスンしています...");
});

サービスnodemon server.jsを起動します

ここに画像の説明を挿入

実行結果:

ここに画像の説明を挿入

Ajax クロスドメインソリューションと、クロスドメインケースの詳細を実現するための CORS 応答ヘッダーの設定に関するこの記事はこれで終わりです。より関連性の高い Ajax クロスドメインソリューションのコンテンツについては、123WORDPRESS.COM の以前の記事を検索するか、次の関連記事を引き続き参照してください。今後とも 123WORDPRESS.COM をよろしくお願いいたします。

以下もご興味があるかもしれません: