[アヤックス] Javawebクロスドメインの問題とその解決策

アヤックスは何ですか

Ajaxは表示されない場合は、ネットワークリソース取得のほとんどは、このプロセスを経るために:
1、ブラウザが要求を送信
、2は、サーバは要求を受け入れ、リソース返す
3、ブラウザのGETリソース、インタフェースの更新(これは必須リフレッシュです)
あなたがコンテンツを更新したい場合は、これは私がパーシャルリフレッシュページコンテンツができないという問題になり、画面全体を更新する必要があります。これは、例えば、私は賞賛で記事にポイントにしたい、非常に無味で、ポイントのポイント合計数の後に賞賛の記事のようにリフレッシュする必要があり、私たちは私に再びそれをリフレッシュするためにページ全体を与えることはできませんが、この経験は悪いです。
この問題を解決するために、Ajaxが登場し、アヤックスは言語ではなく、またそれは新しい技術であり、それは技術、アヤックスのフルネームのシリーズの組み合わせですAsynchronous JavaScript + XMLリソースへのAjaxのアクセスが、動的応答操作を使用する場合は、対応する要求が発行され、リターン結果またはすばやく表示リソース、(または更新)を得るローカルインタフェースに、同時にあなたは全体のインターフェイスを更新せず、資源を得ることができるように。

できないのはなぜクロスドメインのAjax

ブラウザが続くので、アヤックスはないクロスドメイン、することができ、相同政策:ない「ポートと同じプロトコル、同じドメイン名を、」Webリソースは、相互にアクセスすることはできません。Ajaxは、相同プロトコルを使用することで、アヤックスは、非相同のリソースにアクセスすることはできません。

しかし、フォームからそれが理由であるクロスドメイン、することができますか?非常に平和に詳述されていることを知っている兄があります:
ページが別の使用形態に元のドメイン名の後に提出されているので、インタフェースはリフレッシュされた、スクリプトは新しいページの元のページのコンテンツを取得することはできません、ブラウザはそれが安全だと思います。
ブラウザは、あなたがそうすることを許可することはできませんので、AJAXは、コンテンツに読んで対応することができます。

あなたが注意している場合、あなたはそれを見つけるだろう、実際には要求が(ステータスコード:200 OK)を送信してきた、あなただけの応答のみを取得することはできません。だから、この戦略の本質は、ブラウザ、ドメイン名JSで、許可がない場合には、別のドメインの内容を読まない場合があります。しかし、ブラウザが別のドメインへのリクエストを送信するのを防ぐことはできません。

著者:ハングはならない
リンク:https://www.zhihu.com/question/31592553/answer/190789780
出典:ほとんど知っている
著者が著作権を保有。著者は認可商業転載してください接触、非商用の転載は、ソースを明記してください。

どのようにクロスドメインのAjaxの問題を解決するには?

問題へのクロスドメインのAjax二つの溶液の優勢な方法は、一方がJSONP(パディングとJSON)であり、原理は同じで、src属性が相同制限はないので、src属性<script>タグ、動的ローディングJS関数パラメータを使用することですIMGは、インラインフレームは、リンクや他のラベルは、同種限定されるものではないが、唯一の要求を取得JSONPを送信することができ、他のCORS(クロスオリジンリソースの共有)、CORSの実装はように、ヘッドのサービス側に応じて追加のパラメータを指定する必要がありますですサーバーがブラウザに伝え、それはクライアントとサーバ間の通信を禁止することはできません。

HEARTS

原則CORS:パラメータに応じて、サーバー、要求を受信した後に追加され、アクセス制御-許可-起源 、アクセス制御-許可-方法、アクセス制御マックスエイジ、アクセス制御-許可-ヘッダ、Access- ブラウザが受信するコントロール許資格の他のパラメータは、サーバが戻り値の後にこれらのパラメータを設定することにより、クロスドメインリクエストをサポートしているかどうかを決定します。我々は、サーバー上のフィルタを追加して、すべての着信要求がプラス応答パラメータです。
使用CORSを説明する例下:

CORS例

なるディレクトリ
ここに画像を挿入説明
Test.javaコア部を

protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
		response.setCharacterEncoding("utf-8");
		response.getWriter().write("{\"name\":\"xxxxxxxx\"}");
}

SimpleCORSFilter.javaコア部

	public void doFilter(ServletRequest request, ServletResponse response, FilterChain chain) throws IOException, ServletException {
		HttpServletResponse httpServletResponse = (HttpServletResponse) response;
		//设置所有的请求都可以实现Ajax跨域
		httpServletResponse.setHeader("Access-Control-Allow-Origin", "*"); 
		//支持http的POST,GET,OPTIONS,DELETE四种请求方式
		httpServletResponse.setHeader("Access-Control-Allow-Methods", "POST, GET, OPTIONS, DELETE");
		httpServletResponse.setHeader("Access-Control-Max-Age", "60");
		httpServletResponse.setHeader("Access-Control-Allow-Headers", "x-requested-with");
		//是否支持cookie跨域
		//httpServletResponse.addHeader("Access-Control-Allow-Credentials", "true");
		
		chain.doFilter(request, response);
	}

	/**
	 * @see Filter#init(FilterConfig)
	 */
	public void init(FilterConfig fConfig) throws ServletException {
		// TODO Auto-generated method stub
	}

ポイントは、音符に:とAccess-Control-Allow-Credentialsは、クロスドメインのクッキーをサポートするかどうかをマークするために使用されるが、ケースがtrueに設定され、アクセス制御-許可-起源は設定できません*Cookieヘッダが情報要求を運ぶので、 、アクセス制御-許可-起源の値ならば*、要求は失敗します。指定されたドメインが真とAccess-Control-Allow-Credentialsを提供することができるの場合は、指定したドメイン名は、クッキーを受け入れるように要求することができます。

次のようにフィルタを書き込んだ後、フィルタは、web.xml、特定の構成で構成する必要があります
web.xmlのコア部を

  <filter>
    <filter-name>Simple CORSFilter</filter-name>
    <filter-class>filter.SimpleCORSFilter</filter-class>
  </filter>
  <filter-mapping>
    <filter-name>Simple CORSFilter</filter-name>
    <url-pattern>/*</url-pattern>
  </filter-mapping>

index.htmlを

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Ajax test</title>
<!-- 引入jQuery -->
<script src="./js/jquery.min.js"></script>
<script type="text/javascript">
	$.ajax({
		//从本地localhost的8080端口向www.xxxx.com域名的8080端口发送ajax请求
	    url:"http://www.xxxx.com:8080/Ajax_Cross_Origin/Test",
	    type: "get",
	    dataType:"json",
	    xhrFields: {
	    	//设置要不要携带Cookie信息,true为携带,fasle为不携带
	        withCredentials: false
	    },
	    crossDomain: true,
	    success:function (data) {
	    	 alert("12345");
	         console.log(data);
	    }
	});
	
</script>
</head>

<body>
<h1>测试ajax跨域</h1>
</body>
</html>

私のプロジェクトは、このマシンは、プロジェクトを展開しTOMCAT、その後、入力がwww.xxxx.comされるTomcatコンテナサーバのドメイン名に展開されhttp://localhost:8080/Ajax_Cross_Origin/index.html、あなたがネットワークに次の情報を見ることができます:
ここに画像を挿入説明
コンソールに次のメッセージを参照してください:
ここに画像を挿入説明
Ajaxのクロスドメインリクエストが成功しました。

JSONP

実際には、使用のCORS頻度はので、ここでは詳細にはJSONPの具体的な実装を行っていない、JSONPよりもはるかに高いです。JSONPは、<script>のsrc属性実現し、AjaxはXMLHttpRequestを介して達成されることによって実現されているので、もう一つ注意すべきは、JSONPがクロスドメインAjax技術によって提起された問題を解決するということですが、それは、Ajaxにセントを何の関係もありませんでしたA。強くあなたがこの記事を見てすることをお勧めします、JSONPジュニアパートナーについてもっと学びたい人のために:
JSONPがクロスドメインAJAXの問題を解決するため
の素晴らしい書きました!

公開された61元の記事 ウォン称賛16 ビュー10000 +

おすすめ

転載: blog.csdn.net/qq_41427568/article/details/103818920