jquery ajaxクロスドメインリクエストエラーレポート

フロントエンド テクノロジーの発展に伴い、jQuery の使用率はますます高まっています。その中でもjQueryでajaxリクエストを利用してデータを取得するのが一般的ですが、実際の開発ではクロスドメインリクエストが発生した際に問題が発生するため、この記事ではクロスドメインリクエストのエラーを解決する方法を紹介します。

1. クロスドメイン リクエストとは

同じドメイン名の下で、ブラウザの ajax リクエストは自由にデータを送受信できます。ただし、異なるドメイン名では、ブラウザーでの ajax リクエストはセキュリティ ポリシーによって制限され、データを自由に送受信できなくなります。このようにして、クロスドメインリクエストが発生します。

2. クロスドメインリクエストエラーが発生する理由

セキュリティ上の理由から、ブラウザは同一オリジンポリシーを採用しています。同一生成元ポリシーは、異なるソースからのクライアント スクリプトが明示的な承認なしに相互にリソースを読み取ることができないことを意味します。同一生成元ポリシーでは、異なるソースからのクライアント スクリプトが相互に干渉することができないため、Web アプリケーションのセキュリティが確保されます。

相同性とは、具体的には、プロトコル、ドメイン名、ポート番号が完全に同じであることを意味します。

3. クロスドメイン リクエスト エラーを解決する方法

上記の背景知識があれば、クロスドメイン リクエスト エラーの問題を解決できます。

1. JSONP クロスドメイン リクエスト

JSONP (パディング付き JSON) は、クロスドメイン リクエストのソリューションです。その原理は、リクエストを行うときに、フロントエンドがスクリプトタグを動的に作成してコールバック関数名を渡し、サーバーから返されたデータがコールバック関数で実行されるというものです。

具体的な手順は次のとおりです。

1) フロントエンド コード

$.ajax({
    url:'/api/get-data',
    dataType:'jsonp',
    jsonp:'callback',
    success:function (data) {
        console.log(data);
    }
});

説明:

url: 要求されたインターフェイス アドレス

dataType: データ型、ここでは jsonp

jsonp: クライアント要求関数、関数名はコールバック関数の名前として使用されます

success: 要求成功

2) バックエンドコード

(1) 戻り値の前にリクエスト パラメータのコールバックを追加します。

{
'name':'Tom',
'age':23,
'性別' :'男性',
'callbackCode':1
}

(2) 結果を返します

callbacks.callbackCode({"name":"トム","年齢" :23,"性別":"男"});

このうち、callbackCodeはフロントエンドが設定するリクエストメソッド名です。

別の例:

(1) リクエスト パラメータのコールバックが戻り値の前に追加されます

{
'code':'0',
' data' :{

   'name':'Tom',
   'age':23,
   'sex':'男',

},
'message': 'リクエストは成功しました。 ',
'callbackCode':1
}

(2) バックエンドは、callbackCode パラメーターを介してコールバック関数を結合します。

callbacks.callbackCode({"コード":"0","データ":{"名前":"トム","年齢":23,"性別":"男性"},"メッセージ" :"リクエストが成功しました!"});

上記の手順を通じて、JSONP を使用してクロスドメイン リクエストを行うことができます。ただし、JSONP には、GET リクエストのみをサポートし、POST リクエストに対する応答を取得できないなど、いくつかの制限もあります。

2. 応答ヘッダー Access-Control-Allow-Origin を追加します

もう 1 つの方法は、バックエンド インターフェイスで設定し、応答ヘッダーに Access-Control- を追加することです。 「Allow-Origin」フィールドは、要求元のブラウザーにこのクロスオリジン要求を許可するように指示します。

コード例:

@RequestMapping("/api/get-data")
@RestController
public class GetDataController {

@GetMapping
public String getData(HttpServletRequest request) {
    String callback = request.getParameter("callback");

    //模拟后端返回数据
    String json = "{"name":"Tom","age":23,"sex":"男"}";

    //跨域请求响应头设置
    String result = callback + "(" + json + ")";
    return result;
}

}

その中で、メソッドは @GetMapping アノテーションを介して /api/get-data インターフェイスにマップされ、その後リクエスト パラメーターのコールバックが取得され、バックエンドがデータを返すようにシミュレートされ、最後に json データが結果変数を介したコールバック関数の形式。

上記の 2 つの方法により、クロスドメイン リクエスト エラーの問題を解決できます。

概要:

この記事の導入部を通じて、クロスドメイン リクエストとは何か、クロスドメイン リクエスト エラーが発生する理由、およびクロスドメイン リクエスト エラーを解決する方法を理解しました。その中で、主に JSONP クロスドメインリクエストとレスポンスヘッダー Access-Control-Allow-Origin の追加の 2 つの方法を紹介しました。もちろん、さまざまなシナリオで問題を解決するためにさまざまな方法を選択することで、真のニーズを満たすことができます。

以上がjquery ajaxクロスドメインリクエストエラーレポートの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。