jQuery AJAX क्रॉस डोमेन

Question

यहाँ दो पृष्ठ हैं, test.php और testserver.php।

test.php

<script src="scripts/jq.js" type="text/javascript"></script>
<script>
    $(function() {
        $.ajax({url:"testserver.php",
            success:function() {
                alert("Success");
            },
            error:function() {
                alert("Error");
            },
            dataType:"json",
            type:"get"
        }
    )})
</script>

testserver.php

<?php
$arr = array("element1",
             "element2",
             array("element31","element32"));
$arr['name'] = "response";
echo json_encode($arr);
?>

अब मेरी समस्या: जब ये दोनों फाइलें एक ही सर्वर (या तो लोकलहोस्ट या वेब सर्वर) पर होती हैं, तो यह काम करती हैं और alert("Success")कहलाती हैं; यदि यह विभिन्न सर्वरों पर है, तो वेब सर्वर पर testserver.php और स्थानीयहोस्ट पर test.php, इसका काम नहीं कर रहा है, और alert("Error")निष्पादित कर रहा है। भले ही ajax के अंदर का URL http://domain.com/path/to/file/testserver.php में बदल गया हो

Comments

द्वारा रोक रहे लोगों के लिए। यह जानने के लिए पढ़ें कि क्रॉस डोमेन जावास्क्रिप्ट कॉल कैसे काम करती है stackoverflow.com/a/11736771/228656

— अब्दुल मुनीम

मैंने यहाँ इस प्रश्न का उत्तर लिखा है: jQuery AJAX के साथ लोड हो रहा है पार डोमेन html पृष्ठ - अंतिम एक, समर्थन करता है https

— jherax

Answer 1

JSONP का उपयोग करें ।

jQuery:

$.ajax({
     url:"testserver.php",
     dataType: 'jsonp', // Notice! JSONP <-- P (lowercase)
     success:function(json){
         // do stuff with json (in this case an array)
         alert("Success");
     },
     error:function(){
         alert("Error");
     }      
});

पीएचपी:

<?php
$arr = array("element1","element2",array("element31","element32"));
$arr['name'] = "response";
echo $_GET['callback']."(".json_encode($arr).");";
?>

इको गलत हो सकता है, जब से मैंने php का उपयोग किया है तब से यह एक समय हो गया है। किसी भी मामले में आपको आउटपुट की आवश्यकता हैcallbackName('jsonString') उद्धरण चिह्नों । jQuery पास होगा यह स्वयं कॉलबैक नाम है, इसलिए आपको इसे GET params से प्राप्त करना होगा।

और जैसा कि स्टीफन केंडल ने पोस्ट किया, $ .getJSON () एक शॉर्टहैंड विधि है, लेकिन फिर आपको 'callback=?'यूआरएल को GET पैरामीटर के रूप में संलग्न करने की आवश्यकता है (हाँ, मूल्य है?, JQuery ने इसे अपने स्वयं के उत्पन्न कॉलबैक विधि के साथ बदल दिया है)।

Comments

आपको callbackName('/* json */')इसके बजाय वापस जाने की आवश्यकता क्यों है callbackName(/* json */)?

— एरिक

@eric कॉलबैक में JSON स्ट्रिंग की उम्मीद है। सैद्धांतिक रूप से, एक वस्तु भी काम कर सकती है, लेकिन यह सुनिश्चित नहीं है कि jQuery इस पर क्या प्रतिक्रिया देता है, यह एक त्रुटि फेंक सकता है या चुपचाप विफल हो सकता है।

— BGerrissen

मुझे निम्नलिखित त्रुटि मिल रही है। SyntaxError: लापता; कथन से पहले {"ResultCode": 2}। जहाँ {"ResultCode": 2} प्रतिक्रिया है। कृपया सलाह दें।

— user2003356

@ user2003356 ऐसा लगता है जैसे आप JSONP के बजाय सादे JSON लौटा रहे हैं। आपको कुछ वापस करने की आवश्यकता है जैसे: कॉलबैकफंक्शन ({"ResultCode": 2})। jQuery अनुरोध में GET पैरामीटर 'कॉलबैक' जोड़ता है, यह कॉलबैक फ़ंक्शन jquery के उपयोग का नाम है और इसे प्रतिक्रिया में जोड़ा जाना चाहिए।

— BGerrissen

यह 2016 है। कॉर्स अब JSONP के विपरीत एक व्यापक रूप से समर्थित मानक है, जिसे केवल हैक के रूप में वर्णित किया जा सकता है। @ नीचे जोशगढ़ का उत्तर अब सबसे अधिक पसंद किया जाना चाहिए।

— विक्की चिजवानी

Answer 2

JSONP एक अच्छा विकल्प है, लेकिन एक आसान तरीका है। आप बस Access-Control-Allow-Originअपने सर्वर पर हेडर सेट कर सकते हैं । इसे सेट करने के लिए *किसी भी डोमेन से क्रॉस-डोमेन AJAX अनुरोध स्वीकार करना होगा। ( https://developer.mozilla.org/en/http_access_control )

ऐसा करने की विधि भाषा से भाषा में भिन्न होगी, बिल्कुल। यहाँ यह रेल में है:

class HelloController < ApplicationController
  def say_hello
    headers['Access-Control-Allow-Origin'] = "*"
    render text: "hello!"
  end
end

इस उदाहरण में, say_helloएक्शन किसी भी डोमेन से AJAX अनुरोध स्वीकार करेगा और "हैलो!" की प्रतिक्रिया लौटाएगा।

यहाँ शीर्ष लेख का एक उदाहरण है, जो वापस आ सकता है:

HTTP/1.1 200 OK 
Access-Control-Allow-Origin: *
Cache-Control: no-cache, no-store, max-age=0, must-revalidate
Content-Type: text/html; charset=utf-8
X-Ua-Compatible: IE=Edge
Etag: "c4ca4238a0b923820dcc509a6f75849b"
X-Runtime: 0.913606
Content-Length: 6
Server: WEBrick/1.3.1 (Ruby/1.9.2/2011-07-09)
Date: Thu, 01 Mar 2012 20:44:28 GMT
Connection: Keep-Alive

जैसा कि यह आसान है, इसमें कुछ ब्राउज़र सीमाएँ हैं। Http://caniuse.com/#feat=cors देखें ।

Comments

Jsonp ने पोस्ट, पुट और डिलीट का समर्थन नहीं किया। आपका समाधान महान काम करता है।

— टोनीटेक्शी

PHP हेडर में ("एक्सेस-कंट्रोल-अलाउंस-ओरिजिन: *");

— SparK

@ अगर आप jQuery की .post()विधि का उपयोग कर रहे हैं तो आपको jQuery में क्रॉस-डोमेन समर्थन को सक्षम करना होगा। यह इसके साथ किया जाता है $.support.cors = true:।

— फ्रेडरिके

इस तरीके से सर्वर को कॉन्फ़िगर करने के सुरक्षा निहितार्थ क्या हैं?

— जॉन श्नाइडर

बेहतर होगा कि आप केवल उन्हीं डोमेन की अनुमति दें, जिन्हें आप wilcard "*" का उपयोग करने के बजाय डेटा के साथ साझा करना चाहते हैं।

— सेबेस्टियन ग्रिग्नोली

Answer 3

आप एक्सेस-कंट्रोल-अनुमति-उत्पत्ति को जोड़कर HTTP हेडर के माध्यम से इसे नियंत्रित कर सकते हैं । इसे * पर सेट करना किसी भी डोमेन से क्रॉस-डोमेन AJAX अनुरोध स्वीकार करेगा।

PHP का उपयोग करना वास्तव में सरल है, बस निम्न लाइन को उस स्क्रिप्ट में जोड़ें जिसे आप अपने डोमेन से बाहर पहुंचना चाहते हैं:

header("Access-Control-Allow-Origin: *");

Httpd.conf में mod_headers मॉड्यूल सक्षम करना न भूलें।

Comments

आपने मेरा दिन बचाया।

— नोमनजावेद ने

Answer 4

आपको समान उत्पत्ति नीति पर एक नज़र डालने की आवश्यकता है :

कंप्यूटिंग में, एक ही मूल नीति जावास्क्रिप्ट जैसे कई ब्राउज़र साइड प्रोग्रामिंग भाषाओं के लिए एक महत्वपूर्ण सुरक्षा अवधारणा है। नीति उन पृष्ठों पर चलने वाली लिपियों की अनुमति देती है जो एक ही साइट से उत्पन्न होकर एक-दूसरे के तरीकों और गुणों तक पहुँचने के लिए बिना किसी विशेष प्रतिबंध के हैं, लेकिन विभिन्न साइटों पर पृष्ठों के अधिकांश तरीकों और गुणों तक पहुँच को रोकती हैं।

आपको डेटा प्राप्त करने में सक्षम होने के लिए यह होना चाहिए:

एक ही प्रोटोकॉल और मेजबान

आपको इसे हल करने के लिए JSONP को लागू करने की आवश्यकता है ।

Answer 5

मुझे स्थानीय डिस्क "फ़ाइल: /// C: /test/htmlpage.html" से वेबपृष्ठ लोड करना था, "http: //localhost/getxml.php" url पर कॉल करें, और IE8 + और Firefox12 + ब्राउज़रों में ऐसा करें, jQuery v1 का उपयोग करें बॉयलर कोड को कम करने के लिए .7.2 लिब। दर्जनों लेख पढ़ने के बाद अंत में यह समझ में आया। यहाँ मेरा सारांश है।

• सर्वर स्क्रिप्ट (.php, .jsp, ...) को http प्रतिक्रिया शीर्षलेख पहुँच-नियंत्रण-अनुमति-उत्पत्ति लौटना चाहिए: *
• jQuery ajax का उपयोग करने से पहले इस ध्वज को जावास्क्रिप्ट में सेट करें: jQuery.support.cors = true;
• आप jQuery के अजाक्स फ़ंक्शन का उपयोग करने से पहले एक बार या हर बार ध्वज सेट कर सकते हैं
• अब मैं IE और फ़ायरफ़ॉक्स में .xml दस्तावेज़ पढ़ सकता हूं। अन्य ब्राउज़रों का मैंने परीक्षण नहीं किया।
• प्रतिक्रिया दस्तावेज़ सादा / पाठ, xml, json या कुछ और हो सकता है

यहाँ कुछ डीबग sysouts के साथ एक उदाहरण 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 + "\n";
        //});
        //alert(str);
    },
    error: function(jqXHR, textStatus, ex) {
        alert(textStatus + "," + ex + "," + jqXHR.responseText);
    }
});

Comments

मैंने यहाँ इस प्रश्न का उत्तर लिखा है: jQuery AJAX के साथ लोड हो रहा है पार डोमेन html पृष्ठ - पिछले एक, समर्थन करता है https

— jherax

फायरस्ट पॉइंट के लिए: PHP में इस लाइन को स्क्रिप्ट में जोड़ें:header("Access-Control-Allow-Origin: *");

— T30

@ आप अपने जवाब के लिए बहुत बहुत धन्यवाद। आपने मेरी बहुत मदद की। चीयर्स।

— लुइस

Answer 6

यह सच है कि समान-मूल नीति जावास्क्रिप्ट को डोमेन पर अनुरोध करने से रोकती है, लेकिन CORS विनिर्देश आपको जिस तरह की एपीआई एक्सेस की तलाश कर रहा है, वह अनुमति देता है और वर्तमान ब्राउज़र के वर्तमान बैच द्वारा समर्थित है।

क्लाइंट और सर्वर के लिए क्रॉस-ऑरिजनल संसाधन साझाकरण को सक्षम करने का तरीका देखें:

http://enable-cors.org/

"क्रॉस-ऑरिजिनल रिसोर्स शेयरिंग (कॉर्स) एक विनिर्देश है जो वास्तव में डोमेन-सीमाओं के पार खुले उपयोग को सक्षम करता है। यदि आप सार्वजनिक सामग्री परोसते हैं, तो कृपया कॉर्स का उपयोग करके इसे सार्वभौमिक जावास्क्रिप्ट / ब्राउज़र एक्सेस के लिए खोलने पर विचार करें।"

Answer 7

यह संभव है, लेकिन आपको JSON नहीं, बल्कि JSONP का उपयोग करना होगा। स्टीफन के लिंक ने आपको सही दिशा में इशारा किया। JQuery AJAX पृष्ठ JSONP के बारे में अधिक जानकारी नहीं है।

रेमी शार्प में PHP का उपयोग करके एक विस्तृत उदाहरण है ।

Answer 8

मैं अपाचे सर्वर का उपयोग करता हूं, इसलिए मैंने mod_proxy मॉड्यूल का उपयोग किया है। मॉड्यूल सक्षम करें:

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

फिर जोड़िए:

ProxyPass /your-proxy-url/ http://service-url:serviceport/

अंत में, अपनी स्क्रिप्ट में प्रॉक्सी-यूआरएल पास करें।

Answer 9

ब्राउज़र सुरक्षा विभिन्न डोमेन पर होस्ट किए गए पृष्ठ पर एक डोमेन से होस्ट किए गए पृष्ठ से अजाक्स कॉल करने से रोकता है; इसे " समान-मूल नीति " कहा जाता है ।

Answer 10

JSONP का उपयोग करने के लिए कुछ उदाहरण हैं जिनमें त्रुटि हैंडलिंग शामिल है।

हालाँकि, कृपया ध्यान दें कि JSONP का उपयोग करते समय त्रुटि-घटना चालू नहीं होती है! देखें: http://api.jquery.com/jQuery.ajax/ या jQuery ajax jsonp त्रुटि का उपयोग करके अनुरोध

Answer 11

Jquery डॉक्स ( लिंक ) से:

• ब्राउज़र सुरक्षा प्रतिबंधों के कारण, अधिकांश "अजाक्स" अनुरोध एक ही मूल नीति के अधीन हैं; अनुरोध सफलतापूर्वक किसी अन्य डोमेन, उपडोमेन, या प्रोटोकॉल से डेटा पुनर्प्राप्त नहीं कर सकता है।

• स्क्रिप्ट और JSONP अनुरोध समान मूल नीति प्रतिबंधों के अधीन नहीं हैं।

इसलिए मैं इसे ले जाऊंगा कि आपको अनुरोध के लिए jsonp का उपयोग करने की आवश्यकता है। लेकिन खुद इस कोशिश नहीं की है।

Answer 12

मैं आपकी समस्या को हल करने का 3 तरीका जानता हूं:

1. यदि आपके पास दोनों डोमेन तक पहुँच है, तो आप अन्य सभी डोमेन का उपयोग करने की अनुमति दे सकते हैं:

   header("Access-Control-Allow-Origin: *");

   या .htaccess फ़ाइल में कोड बलो जोड़कर एक डोमेन:

   <FilesMatch "\.(ttf|otf|eot|woff)$"> <IfModule mod_headers.c> SetEnvIf Origin "http(s)?://(www\.)?(google.com|staging.google.com|development.google.com|otherdomain.net|dev02.otherdomain.net)$" AccessControlAllowOrigin=$0 Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin </IfModule> </FilesMatch>

2. आप अपने सर्वर में php फ़ाइल के लिए ajax अनुरोध कर सकते हैं और इस php फ़ाइल का उपयोग करके किसी अन्य डोमेन के लिए अनुरोध को संभाल सकते हैं।

3. आप jsonp का उपयोग कर सकते हैं, क्योंकि इसके लिए अनुमति की आवश्यकता नहीं है। इसके लिए आप हमारे दोस्त @BGerrissen का जवाब पढ़ सकते हैं।

Answer 13

Microsoft Azure के लिए, यह थोड़ा अलग है।

Azure में एक विशेष CORS सेटिंग है जिसे सेट करना आवश्यक है। यह मूल रूप से पर्दे के पीछे एक ही बात है, लेकिन हेडर जोशोर मेंशन को सेट करने से काम नहीं चलेगा। क्रॉस डोमेन को सक्षम करने के लिए Azure प्रलेखन यहां पाया जा सकता है:

https://docs.microsoft.com/en-us/azure/app-service-api/app-service-api-cors-consume-javascript

मेरे होस्टिंग प्लेटफ़ॉर्म पर यह विशेष सेटिंग होने से पहले मुझे कुछ घंटों के लिए इसके बारे में पता चला।

Answer 14

यह काम करता है, आप सभी की जरूरत है:

पीएचपी:

header('Access-Control-Allow-Origin: http://www.example.com');
header("Access-Control-Allow-Credentials: true");
header('Access-Control-Allow-Methods: GET, PUT, POST, DELETE, OPTIONS');

JS (jQuery ajax):

var getWBody = $.ajax({ cache: false,
        url: URL,
        dataType : 'json',
        type: 'GET',
        xhrFields: { withCredentials: true }
});