AJAXドメイン間問題の説明

ドメイン間で問題が発生したのはなぜですか?
###[ドメイン間で発生した理由]
1.ブラウザの制限2.ドメイン間(プロトコル、ドメイン名、ポートのいずれかが異なる)3.XHR(XMLHttpRequest)リクエスト
つまり、XMLHttpRequestリクエストが異なるドメイン名を送信すると、ブラウザがアクセスを制限し、ドメイン間の問題が発生します.
###[ドメイン間問題解決の考え方]
1.クライアントブラウザパラメータを変更して制限ブラウザ起動加入を解除する--disable-web-security2.JsonpはXHR要求の問題を解決する.3.ドメイン間:呼び出し元がドメイン間、呼び出し元の非表示要求をサポートする
##ドメイン間の問題解決方法
1.JSONPはドメイン間解決
[原理]: は に されない:JSONP ラベルは、 び しにより する、 り もjs、 callbackパラメータの 、 パラメータは るjsonオブジェクト()である[ ]:1.Getリクエストのみサポート2.XHRリクエストではない
[jsonpリクエスト ]

$.ajax({
	url: 'url",
	dataType: "jsonp",
	jsonp: "callback",
	cache: true,
	success: function(json) {
		result = json;
	}
});

[jsonpリクエスト ]

//    script  
function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag('http://example.com/ip?callback=foo');
}
//     -    
function foo(data) {
  console.log('Your public IP address is: ' + data.ip);
};

2.ドメイン ソリューションCORS
CORSはW 3 C であり、 は「クロスドメインリソース 」(Cross-origin resource sharing)である.CORSにはブラウザとサーバの サポートが です. 、すべてのブラウザがこの をサポートしており、IEブラウザはIE 10を ってはならない.
これにより、ブラウザがソース サーバにXMLHttpRequestリクエストを することができ、AJAXがソースとしか できない を します.CORS プロセス は、ブラウザが に し、ユーザーが する はありません. にとってCORS は のAJAX と がなく,コードは く じである.ブラウザがAJAXリクエストがソース であることを すると、 に のヘッダ が され、 のリクエストが1 えることもありますが、ユーザーは じません.したがって,CORS を する はサーバである.サーバがCORSインタフェースを すれば,ソース が となる.
[ リクエスト-postリクエスト]
: び しサービス Access-Control-Allow-Origin
び されたサービス Access-Control-Allow-Methods

res.addHeader("Access-Control-Allow-Origin", "*") //            
res.addHeader("Access-Control-Allow-Methods", "*") //            

[ リクエスト-クッキー きリクエスト]

$.ajax({
	type: "get",
	url: "url",
	xhrFields: {
		withCredentials: true
	},
	success: function(json) {
		result = json;
	}
});

:クッキーを っている 、originは に しなければならず、*を できません.
び されたサービス Access-Control-Allow-CRedentials

res.addHeader("Access-Control-Allow-Origin", "localhost:8081")
res.addHeader("Access-Control-Allow-Methods", "*")
res.addHeader("Access-Control-Allow-Credentials", "true") //enable cookie

[ でないリクエスト-ヘッダ きリクエスト]

$.ajax({
	type: "get",
	url: 'url",
	headers: {
		"x-header1": "AAA"
	},
	beforeSend: function(xhr) {
		xhr.setRequestHeader("x-header2", "BBB")
	},
	success: function(json) {
		result = json;
	}
});

:クッキーを っている 、originは に しなければならず、*を できません.
び されたサービス Access-Control-Allow-Header

res.addHeader("Access-Control-Allow-Origin", "*")
res.addHeader("Access-Control-Allow-Methods", "*")
res.addHeader("Access-Control-Allow-Header", "content-Type,x-header1,x-header2")

より、

// cookie   ，origin      ，    *
String origin = req.getHeader("Origin");
if (!org.springframework.util.StringUtils.isEmpty(origin)) {
    res.addHeader("Access-Control-Allow-Origin", origin);
}
res.addHeader("Access-Control-Allow-Methods", "*");

//              (           )
String headers = req.getHeader("Access-Control-Request-Headers");
if (!org.springframework.util.StringUtils.isEmpty(headers)) {
    res.addHeader("Access-Control-Allow-Headers", headers);         
}

res.addHeader("Access-Control-Max-Age", "3600");
// enable cookie
res.addHeader("Access-Control-Allow-Credentials", "true");

3.Nginxエージェント
もし たちが するときにフロントエンドのドメイン を うならば、Nginxは たちにこの を のバックエンドのドメイン に してくれます
[Nginx ]

server{
    #   9000  
    listen 9000;
    #    localhost
    server_name localhost;
    #  localhost:9000/api     ，            http://localhost:9001
    location ^~ /api {
        proxy_pass http://localhost:9001;
    }    
}

リクエスト& リクエスト
の2つの を に たす り、 な に し、 りは な に する.
(1) は、HEAD、GET、POSTの3つの の1つである
(2)HTTPのヘッダ は のフィールドを えない(カスタムヘッダなし):

  Accept
  Accept-Language
  Content-Language
  Last-Event-ID

(3)Content-Type:3つの のみ

  application/x-www-form-urlencoded
  multipart/form-data
  text/plain

コードワードは ではありません.もしあなたに に つと ったら、 さな ましをあげましょう(.)!