Ajaxのクロスドメイン問題を解決する方法-jsチュートリアル-php.cn

Ajax クロスドメイン問題の解決策: 1. アクセスを許可するためにヘッダーを応答ヘッダーに追加します; 2. jsonp は get リクエストのみをサポートしますが、post リクエストはサポートしません; 3. httpClient 内部転送; 4. nginx を使用してビルドしますエンタープライズレベルのインターフェイスゲートウェイウェイ。

Ajaxのクロスドメイン問題を解決する方法

関連する無料学習の推奨事項: ajax (ビデオ)

Ajax クロスドメイン問題の解決策:

解決策 1: ヘッダーを応答ヘッダーに追加してアクセスを許可します

Cross-Origin Resource Sharing (CORS) Cross-Origin Resource Sharing

このクロスドメインアクセスソリューションのセキュリティ基盤は、「JavaScript はこの HTTP ヘッダーを制御できない」に基づいています

対象ドメインから返されるHTTPヘッダーを介してクロスドメインアクセスを許可するかどうかを承認する必要があります。

response.addHeader(‘Access-Control-Allow-Origin:*’);//允许所有来源访问 
response.addHeader(‘Access-Control-Allow-Method:POST,GET’);//允许访问的方式

ログイン後にコピー

解決策 2: jsonp は get リクエストのみをサポートし、post リクエストはサポートしません

使用法: ①dataType を jsonp に変更します。 ②jsonp: "jsonpCallback"— — —バックエンドに送信される実際の値は http://a.a.com/a/FromServlet?userName=644064&jsonpCallback=jQueryxxx ③バックエンドは get リクエストで jsonpCallback を取得します ④コールバック構造体を構築します

$.ajax({
type : "GET",
async : false,
url : "http://a.a.com/a/FromServlet?userName=644064",
dataType : "jsonp",//数据类型为jsonp  
jsonp : "jsonpCallback",//服务端用于接收callback调用的function名的参数
success : function(data) {
alert(data["userName"]);
},
error : function() {
alert(&#39;fail&#39;);
}
});
 
//后端
        String jsonpCallback = request.getParameter("jsonpCallback");
//构造回调函数格式jsonpCallback(数据)
resp.getWriter().println(jsonpCallback+"("+jsonObject.toJSONString()+")");

ログイン後にコピー

JSONP 実装原則

同一オリジンポリシーでは、特定のサーバー配下のページはサーバー外のデータを取得できません。つまり、一般的な ajax はクロスドメインリクエストを行うことができません。ただし、img、iframe、script などのタグは例外で、これらのタグは src 属性を通じて他のサーバー上のデータをリクエストできます。

人気のチュートリアル

詳細>