jquery ajaxクロスドメインリクエストエラーレポート-フロントエンドQ&A-php.cn

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

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

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

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

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

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

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

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

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 リクエストに対する応答を取得できないなど、いくつかの制限もあります。

応答ヘッダー 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 サイトの他の関連記事を参照してください。