मैं जावास्क्रिप्ट के माध्यम से क्रॉस-डोमेन POST अनुरोध कैसे भेजूं?
नोट्स - यह पृष्ठ को ताज़ा नहीं करना चाहिए, और मुझे बाद में प्रतिक्रिया को हथियाने और पार्स करने की आवश्यकता है।
मैं जावास्क्रिप्ट के माध्यम से क्रॉस-डोमेन POST अनुरोध कैसे भेजूं?
नोट्स - यह पृष्ठ को ताज़ा नहीं करना चाहिए, और मुझे बाद में प्रतिक्रिया को हथियाने और पार्स करने की आवश्यकता है।
जवाबों:
अपडेट: जारी रखने से पहले सभी को CORS पर html5rocks ट्यूटोरियल पढ़ना और समझना चाहिए । यह समझना आसान है और बहुत स्पष्ट है।
यदि आप सर्वर को पोस्ट किया जा रहा है, तो सर्वर पर प्रतिक्रिया हेडर सेट करके "क्रॉस-ऑरिजनल रिसोर्स शेयरिंग मानक" का लाभ उठाएं। इस उत्तर की चर्चा इस सूत्र में अन्य उत्तरों में की गई है, लेकिन मेरी राय में यह बहुत स्पष्ट नहीं है।
संक्षेप में यहाँ बताया गया है कि आप किस तरह से पार डोमेन POST को.com/1.html से लेकर in.com/postHere.php (उदाहरण के रूप में PHP का उपयोग करके) को पूरा करते हैं। नोट: आपको केवल Access-Control-Allow-Origin
एनओएन OPTIONS
अनुरोधों के लिए सेट करने की आवश्यकता है - यह उदाहरण हमेशा छोटे कोड स्निपेट के लिए सभी हेडर सेट करता है।
PostHere.php सेटअप में निम्नलिखित हैं:
switch ($_SERVER['HTTP_ORIGIN']) {
case 'http://from.com': case 'https://from.com':
header('Access-Control-Allow-Origin: '.$_SERVER['HTTP_ORIGIN']);
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');
header('Access-Control-Max-Age: 1000');
header('Access-Control-Allow-Headers: Content-Type, Authorization, X-Requested-With');
break;
}
यह आपकी स्क्रिप्ट को क्रॉस डोमेन POST, GET और विकल्प बनाने की अनुमति देता है। यह स्पष्ट हो जाएगा क्योंकि आप पढ़ना जारी रखते हैं ...
अपने क्रॉस डोमेन POST को JS (jQuery उदाहरण) से सेट करें:
$.ajax({
type: 'POST',
url: 'https://to.com/postHere.php',
crossDomain: true,
data: '{"some":"json"}',
dataType: 'json',
success: function(responseData, textStatus, jqXHR) {
var value = responseData.someKey;
},
error: function (responseData, textStatus, errorThrown) {
alert('POST failed.');
}
});
जब आप चरण 2 में POST करते हैं, तो आपका ब्राउज़र सर्वर को "विकल्प" विधि भेजेगा। यह ब्राउज़र द्वारा "स्निफ" है यह देखने के लिए कि क्या सर्वर आपके साथ ठंडा है या नहीं। सर्वर "पहुंच-नियंत्रण-अनुमति-उत्पत्ति" के साथ ब्राउज़र को जवाब देता है कि वह ब्राउज़र को अपना POST बताता है। GET = ORIGIN यदि अनुरोध " http://from.com " या " https://from.com " से उत्पन्न हुआ है । चूंकि सर्वर इसके साथ ठीक है, ब्राउज़र 2 बार अनुरोध करेगा (इस समय एक पोस्ट)। यह अच्छा है कि आप अपने ग्राहक को वह सामग्री प्रकार सेट करें जो वह भेज रहा है - इसलिए आपको उसे भी अनुमति देने की आवश्यकता होगी।
एमडीएन में HTTP एक्सेस कंट्रोल के बारे में एक शानदार लिखा गया है , जो पूरे प्रवाह के काम करने के तरीके के बारे में विस्तार से बताता है। उनके डॉक्स के अनुसार, इसे "उन ब्राउज़र में काम करना चाहिए जो क्रॉस-साइट XMLHttpRequest का समर्थन करते हैं"। हालांकि यह थोड़ा भ्रामक है, क्योंकि मुझे लगता है कि केवल आधुनिक ब्राउज़र ही क्रॉस डोमेन POST की अनुमति देते हैं। मैंने केवल सफारी, क्रोम, एफएफ 3.6 के साथ इस काम को सत्यापित किया है।
ऐसा करने पर निम्नलिखित बातों का ध्यान रखें:
400 Bad Request
पर मिलता हूं OPTIONS
। और firefox
के दूसरे अनुरोध में POST
कभी नहीं किया जाता है। :(
यदि आप रिमोट सर्वर को नियंत्रित करते हैं, तो आपको संभवतः कोर का उपयोग करना चाहिए, जैसा कि इस उत्तर में वर्णित है ; यह IE8 और ऊपर, और FF, GC, और Safari के सभी हाल के संस्करणों में समर्थित है। (लेकिन IE8 और 9 में, CORS आपको अनुरोध में कुकीज़ भेजने की अनुमति नहीं देगा।)
इसलिए, यदि आप दूरस्थ सर्वर को नियंत्रित नहीं करते हैं , या यदि आपको IE7 का समर्थन करना है, या यदि आपको कुकीज़ की आवश्यकता है और आपको IE8 / 9 का समर्थन करना है, तो आप शायद एक iframe तकनीक का उपयोग करना चाहते हैं।
यहाँ नमूना कोड है; मैंने इसे IE6, IE7, IE8, IE9, FF4, GC11, S5 पर परीक्षण किया।
function crossDomainPost() {
// Add the iframe with a unique name
var iframe = document.createElement("iframe");
var uniqueString = "CHANGE_THIS_TO_SOME_UNIQUE_STRING";
document.body.appendChild(iframe);
iframe.style.display = "none";
iframe.contentWindow.name = uniqueString;
// construct a form with hidden inputs, targeting the iframe
var form = document.createElement("form");
form.target = uniqueString;
form.action = "http://INSERT_YOUR_URL_HERE";
form.method = "POST";
// repeat for each parameter
var input = document.createElement("input");
input.type = "hidden";
input.name = "INSERT_YOUR_PARAMETER_NAME_HERE";
input.value = "INSERT_YOUR_PARAMETER_VALUE_HERE";
form.appendChild(input);
document.body.appendChild(form);
form.submit();
}
सावधान रहें! आप सीधे POST की प्रतिक्रिया नहीं पढ़ पाएंगे, क्योंकि iframe एक अलग डोमेन पर मौजूद है। फ़्रेम को विभिन्न डोमेन से एक दूसरे के साथ संवाद करने की अनुमति नहीं है; यह समान-मूल नीति है ।
यदि आप दूरस्थ सर्वर को नियंत्रित करते हैं, लेकिन आप CORS का उपयोग नहीं कर सकते हैं (जैसे कि आप IE8 / IE9 पर हैं और आपको कुकीज़ का उपयोग करने की आवश्यकता है), तो समान-मूल नीति के आसपास काम करने के तरीके हैं, उदाहरण के लिए window.postMessage
और / या का उपयोग करके कई पुस्तकालयों में से एक आपको पुराने ब्राउज़र में क्रॉस-डोमेन क्रॉस-फ़्रेम संदेश भेजने की अनुमति देता है:
यदि आप दूरस्थ सर्वर को नियंत्रित नहीं करते हैं, तो आप POST, अवधि की प्रतिक्रिया नहीं पढ़ सकते हैं। यह अन्यथा सुरक्षा समस्याओं का कारण होगा।
स्यूडोकोड
var ifr = document.createElement('iframe');
var frm = document.createElement('form');
frm.setAttribute("action", "yoururl");
frm.setAttribute("method", "post");
// create hidden inputs, add them
// not shown, but similar (create, setAttribute, appendChild)
ifr.appendChild(frm);
document.body.appendChild(ifr);
frm.submit();
आप शायद आइफ्रेम को स्टाइल करना चाहते हैं, जिसे छिपाया और बिल्कुल तैनात किया जाए। यकीन नहीं है कि क्रॉस साइट पोस्टिंग की अनुमति ब्राउज़र द्वारा दी जाएगी, लेकिन यदि हां, तो यह कैसे करना है।
इसे सरल रखें:
क्रॉस-डोमेन POST:
उपयोगcrossDomain: true,
पेज को रिफ्रेश नहीं करना चाहिए:
नहीं, यह पेज को रिफ्रेश नहींकरेगा क्योंकि सर्वर द्वारा रिस्पॉन्स वापस भेजे जाने परsuccess
याerror
async कॉलबैक कहा जाएगा।
$.ajax({
type: "POST",
url: "http://www.yoururl.com/",
crossDomain: true,
data: 'param1=value1¶m2=value2',
success: function (data) {
// do something with server response data
},
error: function (err) {
// handle your error logic here
}
});
crossDomain: true
अजीब तरह से वास्तविक क्रॉस-डोमेन अनुरोधों के साथ कुछ भी नहीं करना है। यदि अनुरोध क्रॉस-डोमेन है, तो jquery इसे स्वचालित रूप से सही पर सेट करता है।
यदि आपके पास सभी सर्वरों तक पहुंच है, तो निम्नलिखित के शीर्ष लेख में उस पृष्ठ के लिए अनुरोध करें जिसे अन्य डोमेन में अनुरोध किया जा रहा है:
पीएचपी:
header('Access-Control-Allow-Origin: *');
उदाहरण के लिए, Drupal के xmlrpc.php कोड में आप ऐसा करेंगे:
function xmlrpc_server_output($xml) {
$xml = '<?xml version="1.0"?>'."\n". $xml;
header('Connection: close');
header('Content-Length: '. strlen($xml));
header('Access-Control-Allow-Origin: *');
header('Content-Type: application/x-www-form-urlencoded');
header('Date: '. date('r'));
// $xml = str_replace("\n", " ", $xml);
echo $xml;
exit;
}
यह संभवतः एक सुरक्षा समस्या पैदा करता है, और आपको यह सुनिश्चित करना चाहिए कि आप अनुरोध को सत्यापित करने के लिए उचित उपाय करें।
Http://taiyolab.com/mbtweet/scripts/twitterapi_call.jspost_method
में फ़ंक्शन की जाँच करें - ऊपर वर्णित iframe विधि के लिए एक अच्छा उदाहरण।
सीएसएस शैली में दो छिपे हुए आइफ्रेम बनाएं ("प्रदर्शन: कोई नहीं;" जोड़ें)। अपने डोमेन पर किसी चीज़ के लिए अपना दूसरा iframe पॉइंट बनाएं।
एक छिपा हुआ फ़ॉर्म बनाएं, लक्ष्य के साथ "पोस्ट" करने के लिए इसकी विधि सेट करें = अपना पहला iframe, और वैकल्पिक रूप से "मल्टीपार्ट / फॉर्म-डेटा" के लिए सेट करें (मैं सोच रहा हूं कि आप POST करना चाहते हैं क्योंकि आप चित्रों की तरह मल्टीपार्ट डेटा भेजना चाहते हैं ?)
तैयार होने पर, फॉर्म सबमिट करें () पोस्ट करें।
यदि आप जावास्क्रिप्ट को वापस करने के लिए अन्य डोमेन प्राप्त कर सकते हैं जो iframes ( http://softwareas.com/cross-domain-communication-with-iframes ) के साथ क्रॉस-डोमेन कम्युनिकेशन करेंगे, तो आप भाग्य में हैं, और आप प्रतिक्रिया पर कब्जा कर सकते हैं भी।
बेशक, यदि आप अपने सर्वर को प्रॉक्सी के रूप में उपयोग करना चाहते हैं, तो आप इस सब से बच सकते हैं। बस अपने स्वयं के सर्वर को फ़ॉर्म सबमिट करें, जो अन्य सर्वर के अनुरोध को प्रॉक्सी करेगा (दूसरे सर्वर को आईपी विसंगतियों को नोटिस करने के लिए सेट नहीं किया गया है), प्रतिक्रिया प्राप्त करें, और जो कुछ भी आप चाहते हैं उसे वापस करें।
एक और महत्वपूर्ण बात ध्यान दें !!! में उदाहरण है कि यह कैसे उपयोग करने के लिए वर्णित ऊपर
$.ajax({
type : 'POST',
dataType : 'json',
url : 'another-remote-server',
...
});
JQuery 1.6 और निचले में क्रॉस-डोमेन XHR के साथ एक बग है। फायरबग के अनुसार विकल्प के अलावा कोई अनुरोध नहीं भेजा गया था। कोई पोस्ट नहीं। बिल्कुल भी।
5 घंटे का परीक्षण / मेरे कोड को ट्यून किया। रिमोट सर्वर (स्क्रिप्ट) पर बहुत सारे हेडर जोड़ना। बिना किसी प्रभाव के। लेकिन बाद में, मैंने 1.6.4 में JQuery के लेबर को अपडेट किया है, और सब कुछ एक आकर्षण की तरह काम करता है।
यदि आप ASP.NET MVC वातावरण में JQuery AJAX के साथ ऐसा करना चाहते हैं, तो इन चरणों का पालन करें: (यह इस धागे पर प्रस्तुत समाधान का सारांश है )
मान लें कि "caller.com" (किसी भी वेबसाइट हो सकती है) को "server.com" (एक ASP.net MVC एप्लिकेशन) पर पोस्ट करना होगा
"Server.com" ऐप के Web.config में निम्न अनुभाग जोड़ें:
<httpProtocol>
<customHeaders>
<add name="Access-Control-Allow-Origin" value="*" />
<add name="Access-Control-Allow-Headers" value="Content-Type" />
<add name="Access-Control-Allow-Methods" value="POST, GET, OPTIONS" />
</customHeaders>
</httpProtocol>
"Server.com" पर, हमारे पास नियंत्रक (जिसे "होम" कहा जाता है) पर निम्नलिखित कार्रवाई होगी, जिस पर हम पोस्टिंग करेंगे:
[HttpPost]
public JsonResult Save()
{
//Handle the post data...
return Json(
new
{
IsSuccess = true
});
}
फिर "caller.com" से, एक फॉर्म (html आईडी "formId" के साथ) से "server.com" के रूप में डेटा पोस्ट करें:
$.ajax({
type: "POST",
url: "http://www.server.com/home/save",
dataType: 'json',
crossDomain: true,
data: $(formId).serialize(),
success: function (jsonResult) {
//do what ever with the reply
},
error: function (jqXHR, textStatus) {
//handle error
}
});
एक और तरीका है (html5 सुविधा का उपयोग करके)। आप उस अन्य डोमेन पर होस्ट किए गए प्रॉक्सी iframe का उपयोग कर सकते हैं, आप उस iframe को पोस्टमासेज का उपयोग करके संदेश भेजते हैं, फिर उस iframe POST अनुरोध (उसी डोमेन पर) कर सकते हैं और पोस्टमासेज को मूल विंडो में वापस भेज सकते हैं।
प्रेषक। com पर जनक
var win = $('iframe')[0].contentWindow
function get(event) {
if (event.origin === "http://reciver.com") {
// event.data is response from POST
}
}
if (window.addEventListener){
addEventListener("message", get, false)
} else {
attachEvent("onmessage", get)
}
win.postMessage(JSON.stringify({url: "URL", data: {}}),"http://reciver.com");
rerver.com पर iframe
function listener(event) {
if (event.origin === "http://sender.com") {
var data = JSON.parse(event.data);
$.post(data.url, data.data, function(reponse) {
window.parent.postMessage(reponse, "*");
});
}
}
// don't know if we can use jQuery here
if (window.addEventListener){
addEventListener("message", listener, false)
} else {
attachEvent("onmessage", listener)
}
उच्च स्तर .... आपको अपने सर्वर पर एक cname सेटअप करने की आवश्यकता है ताकि other-serve.your-server.com other-verver.com पर इंगित किया जा सके।
आपका पृष्ठ गतिशील रूप से एक अदृश्य iframe बनाता है, जो अन्य-server.com में आपके परिवहन के रूप में कार्य करता है। फिर आपको JS को अपने पेज से दूसरे-server.com पर संचार करना होगा और कॉल बैक करना होगा जो डेटा को आपके पेज पर वापस कर देगा।
संभव है, लेकिन आपके-server.com और other-server.com से समन्वय की आवश्यकता है
मुझे लगता है कि सबसे अच्छा तरीका है कि XMLHttpRequest (जैसे $ .ajax), $ .post () को jQuery में से एक के साथ क्रॉस-ऑरिजनल रिसोर्स शेयरिंग पॉलीफ़िल्स https://github.com/Modernizr/Modernizr/wiki/HTML5- का उपयोग करें। क्रॉस ब्राउज़र Polyfills # विकि-CORS
यह एक पुराना सवाल है, लेकिन कुछ नई तकनीक किसी की मदद कर सकती हैं।
यदि आपके पास अन्य सर्वर तक प्रशासनिक पहुंच है, तो आप अपने क्रॉस-डोमेन POST को पूरा करने के लिए ओपनसोर्स फोर्ज प्रोजेक्ट का उपयोग कर सकते हैं। फोर्ज एक क्रॉस-डोमेन जावास्क्रिप्ट XmlHttpRequest आवरण प्रदान करता है जो फ्लैश के कच्चे सॉकेट एपीआई का लाभ उठाता है। पोस्ट भी टीएलएस पर किया जा सकता है।
जिस कारण से आप पोस्ट कर रहे हैं, उस सर्वर तक आपको प्रशासनिक पहुंच की आवश्यकता है क्योंकि आपको एक क्रॉस-डोमेन नीति प्रदान करनी होगी जो आपके डोमेन से पहुंच की अनुमति देती है।
मुझे पता है कि यह एक पुराना सवाल है, लेकिन मैं अपना दृष्टिकोण साझा करना चाहता था। मैं एक प्रॉक्सी के रूप में, बहुत आसान और सुसंगत है। Ph.pp नामक एक php पेज बनाएँ, और निम्नलिखित कोड जोड़ें:
<?
function post($url, $data) {
$header = array("User-Agent: " . $_SERVER["HTTP_USER_AGENT"], "Content-Type: application/x-www-form-urlencoded");
$curl = curl_init();
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_HTTPHEADER, $header);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, 1);
curl_setopt($curl, CURLOPT_POST, 1);
curl_setopt($curl, CURLOPT_POSTFIELDS, $data);
$response = curl_exec($curl);
curl_close($curl);
return $response;
}
$url = "your cross domain request here";
$data = $_SERVER["QUERY_STRING"];
echo(post($url, $data));
फिर, अपने js (jQuery यहाँ) में:
$.ajax({
type: 'POST',
url: 'submit.php',
crossDomain: true,
data: '{"some":"json"}',
dataType: 'json',
success: function(responseData, textStatus, jqXHR) {
var value = responseData.someKey;
},
error: function (responseData, textStatus, errorThrown) {
alert('POST failed.');
}
});
YQL कस्टम टेबल + JS XHR के साथ संभव होना चाहिए, इस पर एक नज़र डालें: http://developer.yahoo.com/yql/guide/index.html
मैं इसका उपयोग कुछ क्लाइंट साइड (js) html स्क्रैपिंग करने के लिए करता हूं, ठीक काम करता है (मेरे पास एक पूर्ण ऑडियो प्लेयर है, जिसमें इंटरनेट / प्लेलिस्ट / लिरिक्स / अंतिम fm informations पर खोज की जाती है, सभी क्लाइंट js + YQL)
कॉर्स आपके लिए है। CORS "क्रॉस ओरिजिनल रिसोर्स शेयरिंग" है, क्रॉस डोमेन रिक्वेस्ट भेजने का एक तरीका है। अब XMLHttpRequest2 और Fetch API दोनों को सपोर्ट करें, और यह POST और GET रिक्वेस्ट दोनों को भेज सकता है।
लेकिन इसकी सीमाएँ हैं। किसी को भी एक्सेस-कंट्रोल-अलाउंस- ओरिजनल क्लेम करने की आवश्यकता है , और इसे '*' पर सेट नहीं किया जा सकता है।
और यदि आप चाहते हैं कि कोई भी उत्पत्ति आपसे अनुरोध भेज सके, तो आपको JSONP की आवश्यकता है ( Access-Control-Allow-Origin सेट करने की आवश्यकता है , लेकिन '*' हो सकता है)
बहुत सारे अनुरोध के तरीके के लिए यदि आप नहीं जानते कि कैसे चुनाव करना है, तो मुझे लगता है कि आपको ऐसा करने के लिए एक पूर्ण कार्यात्मक घटक की आवश्यकता है। मुझे एक साधारण घटक का परिचय दें https://github.com/Joker-Jelly/catta
यदि आप आधुनिक ब्राउज़र (> IE9, Chrome, FF, Edge, आदि) का उपयोग कर रहे हैं, तो आपको एक सरल लेकिन सौंदर्य घटक https://github.com/Joker-Jelly/catta का उपयोग करने की सलाह देते हैं । इसकी कोई निर्भरता नहीं है, कम 3KB की तुलना में, और यह एक ही घातक सैंपल सिंटैक्स और विकल्पों के साथ Fetch, AJAX और JSONP का समर्थन करता है।
catta('./data/simple.json').then(function (res) {
console.log(res);
});
यह आपकी परियोजना को आयात करने के लिए सभी तरह से समर्थन करता है, जैसे ईएस 6 मॉड्यूल, कॉमनजस और यहां तक <script>
कि HTML में भी ।
यदि आपके पास क्रॉस डोमेन सर्वर तक पहुंच है और सर्वर साइड पर कोई कोड परिवर्तन नहीं करना चाहते हैं, तो आप 'xdomain' नामक लाइब्रेरी का उपयोग कर सकते हैं।
यह काम किस प्रकार करता है:
चरण 1: सर्वर 1: xdomain लाइब्रेरी को शामिल करें और क्रॉस डोमेन को दास के रूप में कॉन्फ़िगर करें:
<script src="js/xdomain.min.js" slave="https://crossdomain_server/proxy.html"></script>
चरण 2: क्रॉस डोमेन सर्वर पर, एक प्रॉक्सी। Html फ़ाइल बनाएं और सर्वर 1 को एक मास्टर के रूप में शामिल करें:
proxy.html:
<!DOCTYPE HTML>
<script src="js/xdomain.min.js"></script>
<script>
xdomain.masters({
"https://server1" : '*'
});
</script>
चरण 3:
अब, आप सर्वर 1 से एंडपॉइंट के रूप में प्रॉक्सी.html को AJAX कॉल कर सकते हैं। यह कोर अनुरोध को बायपास करता है। पुस्तकालय आंतरिक रूप से iframe समाधान का उपयोग करता है जो क्रेडेंशियल्स और सभी संभावित तरीकों के साथ काम करता है: GET, POST आदि।
क्वेरी अजाक्स कोड:
$.ajax({
url: 'https://crossdomain_server/proxy.html',
type: "POST",
data: JSON.stringify(_data),
dataType: "json",
contentType: "application/json; charset=utf-8"
})
.done(_success)
.fail(_failed)