jQuery AJAXドメイン間
6359 ワード
jQuery AJAX cross domain
Here are two pages, test.php and testserver.php. これは2つのページですphpとtestserver.php.
test.php test.php
testserver.php testserver.php
Now my problem: when both of these files are on the same server (either localhost or web server), it works and
1階
参照先:https://stackoom.com/question/Ei7k/jQuery-AJAXドメイン間
2階
I had to load webpage from local disk "file:///C:/test/htmlpage.html", call "http://localhost/getxml.php「url,and do this in IE 8+and Firefox 12+browsers,use jQuery v 1.7.2 lib to minimize boilerplate code.ローカルディスク「file://C:/test/html page.html」からWebページをロードし、「http://localhost/getxml.php」を呼び出さなければなりません.urlは、IE 8+およびFirefox 12+ブラウザで実行され、jQuery v 1.7.2 libを使用してテンプレートコードを最小化します.After reading dozens of articles finally figured it out. 数十編の文章を読んでやっと明らかになった.Here is my summary. これは私のまとめです. server script (.php, .jsp, ...) must return http response header Access-control-Allow-Origin:*サーバスクリプト(.php,.jsp,...)http応答ヘッダAccess-Control-Allow-Origin:* に戻る必要があります. before using jQuery ajax set this flag in javascript: jQuery.support.cors = true; jQueryを使用する前に、ajaxはjavascriptにこのフラグを設定しました:jQuery.support.cors = true; you may set flag once or everytime before using jQuery ajax function jQuery ajax関数を使用する前に1回または毎回 タグを設定できます. now I can read .xml document in IE and Firefox. IEとFirefoxで読むことができます.xmlドキュメントです.Other browsers I did not test. 他のブラウザではテストしていません. response document can be plain/text,xml,json or anything else応答ドキュメントはplain/text,xml,jsonまたはその他の任意のコンテンツ であることができる.
Here is an example jQuery ajax call with some debug sysouts. これは、いくつかのデバッグsysoutを含むjQuery ajax呼び出しの例です.
#3階
There are few examples for using JSONP which include error handling. JSONPを使用する例は少なく,エラー処理を含む.
However, please note that the error-event is not triggered when using JSONP! ただしJSONPを使用してもエラーイベントは発生しませんのでご注意ください!See: http://api.jquery.com/jQuery.ajax/or jQuery ajax request using jsonp error関連項目:http://api.jquery.com/jQuery.ajax/またはjsonpエラーを使用したjQuery ajaxリクエスト
#4階
It is true that the same-origin policy prevents JavaScript from making requests across domains, but the CORS specification allows just the sort of API access you are looking for, and is supported by the current batch of major browsers. 確かに、同源ポリシーはJavaScriptがドメイン間で要求を発行することを阻止しますが、CORS仕様では、探しているAPIへのアクセスのみが許可され、現在の一括主流ブラウザでサポートされています.
See how to enable cross-origin resource sharing for client and server:クライアントとサーバのソース間リソース共有を有効にする方法については、次の手順に従います.
http://enable-cors.org/http://enable-cors.org/
"Cross-Origin Resource Sharing (CORS) is a specification that enables truly open access across domain-boundaries. If you serve public content, please consider using CORS to open it up for universal JavaScript/browser access."「ドメイン間リソース共有(CORS)は、ドメイン間境界への本格的なオープンアクセスを実現するための仕様です.パブリックコンテンツを提供する場合は、CORSを使用して開いて汎用JavaScript/ブラウザへのアクセスを検討してください.」
#5階
You can control this via HTTP header by adding Access-Control-Allow-Origin . この操作は、Access-Control-Allow-Originを追加することでHTTPヘッダで制御できます.Setting it to * will accept cross-domain AJAX requests from any domain. *に設定すると、任意のドメインからのドメイン間AJAXリクエストが受け入れられます.
Using PHP it's really simple,just add the following line into the script that you want to have access outside from your domain:PHPを使用するのは簡単です.ドメイン外からアクセスするスクリプトに次の行を追加するだけです.
Don't forget to enable mod_headers module in httpd.忘れないでconfでmod_を有効にするheadersモジュール.
#6階
You need to have a look at Same Origin Policy:同源ポリシーを表示する必要があります.
In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. 計算では、同じソースポリシーは、JavaScriptなどの多くのブラウザ側プログラミング言語の重要なセキュリティ概念です.The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites. このポリシーにより、同じサイトからのページで実行されるスクリプトは、特定の制限なしに互いのメソッドとプロパティにアクセスできますが、異なるサイトのページでのほとんどのメソッドとプロパティへのアクセスはブロックされます.
For you to be able to get data,it has to be:データを取得するには:
Same protocol and host同じプロトコルとホスト
You need to implement JSONP to workaround it. JSONPを実装して解決する必要があります.
Here are two pages, test.php and testserver.php. これは2つのページですphpとtestserver.php.
test.php test.php
$(function() {
$.ajax({url:"testserver.php",
success:function() {
alert("Success");
},
error:function() {
alert("Error");
},
dataType:"json",
type:"get"
}
)})
testserver.php testserver.php
Now my problem: when both of these files are on the same server (either localhost or web server), it works and
alert("Success")
is called; 今私の問題は、この2つのファイルが同じサーバ(ローカルホストまたはWebサーバ)上にある場合、動作し、alert("Success")
が呼び出されます.If it is on different servers, meaning testserver.php on web server and test.php on localhost, its not working, and alert("Error")
is executing. 異なるサーバ上に存在する場合、Webサーバ上のtestserverを意味する.phpとlocalhostのtest.phpは、機能せず、alert("Error")
を実行しています.Even if the URL inside ajax is changed to http://domain.com/path/to/file/testserver.phpajaxのURLがhttp://domain.com/path/to/file/testserver.php 1階
参照先:https://stackoom.com/question/Ei7k/jQuery-AJAXドメイン間
2階
I had to load webpage from local disk "file:///C:/test/htmlpage.html", call "http://localhost/getxml.php「url,and do this in IE 8+and Firefox 12+browsers,use jQuery v 1.7.2 lib to minimize boilerplate code.ローカルディスク「file://C:/test/html page.html」からWebページをロードし、「http://localhost/getxml.php」を呼び出さなければなりません.urlは、IE 8+およびFirefox 12+ブラウザで実行され、jQuery v 1.7.2 libを使用してテンプレートコードを最小化します.After reading dozens of articles finally figured it out. 数十編の文章を読んでやっと明らかになった.Here is my summary. これは私のまとめです.
Here is an example jQuery ajax call with some debug sysouts. これは、いくつかのデバッグsysoutを含むjQuery ajax呼び出しの例です.
jQuery.support.cors = true;
$.ajax({
url: "http://localhost/getxml.php",
data: { "id":"doc1", "rows":"100" },
type: "GET",
timeout: 30000,
dataType: "text", // "xml", "json"
success: function(data) {
// show text reply as-is (debug)
alert(data);
// show xml field values (debug)
//alert( $(data).find("title").text() );
// loop JSON array (debug)
//var str="";
//$.each(data.items, function(i,item) {
// str += item.title + "
";
//});
//alert(str);
},
error: function(jqXHR, textStatus, ex) {
alert(textStatus + "," + ex + "," + jqXHR.responseText);
}
});
#3階
There are few examples for using JSONP which include error handling. JSONPを使用する例は少なく,エラー処理を含む.
However, please note that the error-event is not triggered when using JSONP! ただしJSONPを使用してもエラーイベントは発生しませんのでご注意ください!See: http://api.jquery.com/jQuery.ajax/or jQuery ajax request using jsonp error関連項目:http://api.jquery.com/jQuery.ajax/またはjsonpエラーを使用したjQuery ajaxリクエスト
#4階
It is true that the same-origin policy prevents JavaScript from making requests across domains, but the CORS specification allows just the sort of API access you are looking for, and is supported by the current batch of major browsers. 確かに、同源ポリシーはJavaScriptがドメイン間で要求を発行することを阻止しますが、CORS仕様では、探しているAPIへのアクセスのみが許可され、現在の一括主流ブラウザでサポートされています.
See how to enable cross-origin resource sharing for client and server:クライアントとサーバのソース間リソース共有を有効にする方法については、次の手順に従います.
http://enable-cors.org/http://enable-cors.org/
"Cross-Origin Resource Sharing (CORS) is a specification that enables truly open access across domain-boundaries. If you serve public content, please consider using CORS to open it up for universal JavaScript/browser access."「ドメイン間リソース共有(CORS)は、ドメイン間境界への本格的なオープンアクセスを実現するための仕様です.パブリックコンテンツを提供する場合は、CORSを使用して開いて汎用JavaScript/ブラウザへのアクセスを検討してください.」
#5階
You can control this via HTTP header by adding Access-Control-Allow-Origin . この操作は、Access-Control-Allow-Originを追加することでHTTPヘッダで制御できます.Setting it to * will accept cross-domain AJAX requests from any domain. *に設定すると、任意のドメインからのドメイン間AJAXリクエストが受け入れられます.
Using PHP it's really simple,just add the following line into the script that you want to have access outside from your domain:PHPを使用するのは簡単です.ドメイン外からアクセスするスクリプトに次の行を追加するだけです.
header("Access-Control-Allow-Origin: *");
Don't forget to enable mod_headers module in httpd.忘れないでconfでmod_を有効にするheadersモジュール.
#6階
You need to have a look at Same Origin Policy:同源ポリシーを表示する必要があります.
In computing, the same origin policy is an important security concept for a number of browser-side programming languages, such as JavaScript. 計算では、同じソースポリシーは、JavaScriptなどの多くのブラウザ側プログラミング言語の重要なセキュリティ概念です.The policy permits scripts running on pages originating from the same site to access each other's methods and properties with no specific restrictions, but prevents access to most methods and properties across pages on different sites. このポリシーにより、同じサイトからのページで実行されるスクリプトは、特定の制限なしに互いのメソッドとプロパティにアクセスできますが、異なるサイトのページでのほとんどのメソッドとプロパティへのアクセスはブロックされます.
For you to be able to get data,it has to be:データを取得するには:
Same protocol and host同じプロトコルとホスト
You need to implement JSONP to workaround it. JSONPを実装して解決する必要があります.