AJAX के साथ क्रॉस-डोमेन समापन बिंदु लोड हो रहा है


131

मैं AJAX का उपयोग करके एक क्रॉस-डोमेन HTML पेज को लोड करने की कोशिश कर रहा हूं, लेकिन जब तक डेटाटाइप "जोंसप" नहीं होता है मुझे प्रतिक्रिया नहीं मिल सकती है। हालांकि jsonp का उपयोग करके ब्राउज़र एक स्क्रिप्ट माइम प्रकार की उम्मीद कर रहा है लेकिन "टेक्स्ट / html" प्राप्त कर रहा है।

अनुरोध के लिए मेरा कोड है:

$.ajax({
    type: "GET",
    url: "http://saskatchewan.univ-ubs.fr:8080/SASStoredProcess/do?_username=DARTIES3-2012&_password=P@ssw0rd&_program=%2FUtilisateurs%2FDARTIES3-2012%2FMon+dossier%2Fanalyse_dc&annee=2012&ind=V&_action=execute",
    dataType: "jsonp",
}).success( function( data ) {
    $( 'div.ajax-field' ).html( data );
});

क्या अनुरोध के लिए jsonp के उपयोग से बचने का कोई तरीका है? मैंने पहले ही क्रॉसडोमेन पैरामीटर का उपयोग करने की कोशिश की है, लेकिन यह काम नहीं किया।

यदि jsonp में html सामग्री प्राप्त करने का कोई तरीका नहीं है? वर्तमान में कंसोल जोंसप उत्तर में "अप्रत्याशित <" कह रहा है।


यहां बताए मैं एक proxy.php बनाने के द्वारा समस्या हल हो गई है scode7.blogspot.com/2019/11/...
CodeDezk

जवाबों:


235

jQuery के अजाक्स नोट्स

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

क्रॉस-डोमेन बाधा को दूर करने के कुछ तरीके हैं :

कुछ प्लगइन्स हैं जो क्रॉस-डोमेन अनुरोधों की सहायता करते हैं:

सचेत!

इस समस्या को दूर करने का सबसे अच्छा तरीका, बैक-एंड में अपना खुद का प्रॉक्सी बनाना है, ताकि आपका प्रॉक्सी अन्य डोमेन में सेवाओं को इंगित करे, क्योंकि बैक-एंड में समान मूल पॉलिसी प्रतिबंध मौजूद नहीं है । लेकिन अगर आप बैक-एंड में ऐसा नहीं कर सकते, तो निम्नलिखित युक्तियों पर ध्यान दें।


चेतावनी!

तृतीय-पक्ष प्रॉक्सी का उपयोग करना सुरक्षित अभ्यास नहीं है, क्योंकि वे आपके डेटा का ट्रैक रख सकते हैं, इसलिए इसका उपयोग सार्वजनिक जानकारी के साथ किया जा सकता है, लेकिन निजी डेटा के साथ कभी नहीं


कोड उदाहरण नीचे उपयोग दिखाया jQuery.get () और jQuery.getJSON () , दोनों की आशुलिपि तरीके हैं jQuery.ajax ()


कहीं भी

कोर कहीं भी एक नोड है। प्रॉक्सी जो अनुमानित अनुरोध के लिए कॉर्स हेडर जोड़ता है।
एपीआई का उपयोग करने के लिए, बस यूआरएल यूआरएल के साथ यूआरएल को उपसर्ग करें। ( Https का समर्थन करता है : github भंडार देखें )

यदि आप आवश्यक होने पर स्वचालित रूप से क्रॉस-डोमेन अनुरोध सक्षम करना चाहते हैं, तो निम्नलिखित स्निपेट का उपयोग करें:

$.ajaxPrefilter( function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
    //options.url = "http://cors.corsproxy.io/url=" + options.url;
  }
});

$.get(
    'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing',
    function (response) {
        console.log("> ", response);
        $("#viewer").html(response);
});


जो कुछ भी मूल

जो भी ओरिजिनल एक क्रॉस डोमेन जोंसप एक्सेस है। यह anyorigin.com के लिए एक खुला स्रोत विकल्प है ।

Google.com से डेटा प्राप्त करने के लिए , आप इस स्निपेट का उपयोग कर सकते हैं:

// It is good specify the charset you expect.
// You can use the charset you want instead of utf-8.
// See details for scriptCharset and contentType options: 
// http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
$.ajaxSetup({
    scriptCharset: "utf-8", //or "ISO-8859-1"
    contentType: "application/json; charset=utf-8"
});

$.getJSON('http://whateverorigin.org/get?url=' + 
    encodeURIComponent('http://google.com') + '&callback=?',
    function (data) {
        console.log("> ", data);

        //If the expected response is text/plain
        $("#viewer").html(data.contents);

        //If the expected response is JSON
        //var response = $.parseJSON(data.contents);
});


कोरस प्रॉक्सी

कॉर्स प्रॉक्सी किसी भी वेबसाइट के लिए कॉर्स अनुरोध को सक्षम करने के लिए एक सरल नोड.जेएस प्रॉक्सी है। यह आपकी साइट पर जावास्क्रिप्ट कोड को अन्य डोमेन पर संसाधनों तक पहुंचने के लिए अनुमति देता है जो समान-मूल नीति के कारण सामान्य रूप से अवरुद्ध हो जाएंगे।

यह कैसे काम करता है? CORS प्रॉक्सी क्रॉस-ऑरिजनल रिसोर्स शेयरिंग का लाभ उठाता है, जो कि HTML 5. के साथ जोड़ा गया एक फीचर है। सर्वर यह निर्दिष्ट कर सकते हैं कि वे चाहते हैं कि ब्राउज़र अन्य वेबसाइटों को उन संसाधनों का अनुरोध करने की अनुमति दें जिनकी वे मेजबानी करते हैं। कॉर्स प्रॉक्सी बस एक HTTP प्रॉक्सी है, जो "किसी को भी यह अनुरोध कर सकता है" कहकर प्रतिक्रियाओं में एक हेडर जोड़ता है।

यह लक्ष्य प्राप्त करने का एक और तरीका है ( www.corsproxy.com देखें )। आपको बस इतना करना है : http: // और www। URL को सम्‍मिलित किया जा रहा है, और URL को प्रीपेंड करेंwww.corsproxy.com/

$.get(
    'http://www.corsproxy.com/' +
    'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
    function (response) {
        console.log("> ", response);
        $("#viewer").html(response);
});


CORS प्रॉक्सी ब्राउज़र

हाल ही में मैंने यह पाया, इसमें विभिन्न सुरक्षा उन्मुख क्रॉस ओरिजिनल रिमोट शेयरिंग उपयोगिताओं शामिल हैं। लेकिन यह बैकएंड के रूप में फ्लैश के साथ एक ब्लैक-बॉक्स है।

आप इसे यहां क्रिया में देख सकते हैं: CORS प्रॉक्सी ब्राउज़र
GitHub पर स्रोत कोड प्राप्त करें: koto / cors-प्रॉक्सी ब्राउज़र


4
आप यहाँ से जो कुछ भी अपना स्वयं का संस्करण तैनात कर सकते हैं, जो भी है (या अपने स्वयं के उपयोग के लिए कोड को पोर्ट करें): github.com/ripper234/Whatever-Origin
EpicVoyage

1
छवियाँ, CSS और बाहरी जावास्क्रिप्ट को किसी अन्य मूल से संदर्भित किया जा सकता है, इस प्रकार, प्रतिक्रिया में आप HTML स्ट्रिंग पर जा सकते हैं और बाहरी संसाधनों के src को बदल सकते हैं
jherax

1
हाय jherax मैं एक html पृष्ठ प्राप्त करने के लिए जोइनोरिजिन का उपयोग करता था (केवल मेरे लिए काम करता था, yql, google आदि का उपयोग करता था) लेकिन गैर अंग्रेजी अक्षर अजीब हैं। data.contents को एन्कोड करने की कोशिश की, लेकिन मदद नहीं की
user217648

1
नमस्कार @ मिरू, जैसा कि शीर्षक कहता है: "jQuery AJAX के साथ क्रॉस डोमेन html पृष्ठ लोड करें", मैंने क्रॉस-डोमेन अनुरोध करने के लिए प्रॉक्सी का उपयोग करके कुछ उदाहरण प्रदान करके शीर्षक का उत्तर दिया। इसके अलावा, प्रश्न के शब्दों के जवाब में, मैंने YQL के साथ JSONP का उपयोग करके क्रॉस-डोमेन अनुरोध करने के लिए कुछ लिंक प्रदान किए। मैं आपको लिंक पढ़ने के लिए आमंत्रित करता हूं, वे बहुत उपयोगी हैं।
22

1
कोर के साथ कहीं भी विधि का उपयोग कर समाप्त हुआ $.ajaxPrefilterऔर इसने बहुत अच्छा काम किया। बहुत धन्यवाद!
जोशुआ पिंटर

24

आप अजाक्स-क्रॉस-ओरिजिन एक jQuery प्लगइन का उपयोग कर सकते हैं। इस प्लगइन के साथ आप jQuery.ajax()क्रॉस डोमेन का उपयोग करते हैं। इसे प्राप्त करने के लिए यह Google सेवाओं का उपयोग करता है:

AJAX क्रॉस ओरिजिनल प्लगइन Google Apps Script का उपयोग प्रॉक्सी jSON गेटटर के रूप में करता है जहाँ jSONP लागू नहीं होता है। जब आप crossOrigin विकल्प को सही पर सेट करते हैं, तो प्लगइन मूल यूआरएल को Google Apps स्क्रिप्ट पते से बदल देता है और इसे एन्कोडेड url पैरामीटर के रूप में भेजता है। Google Apps स्क्रिप्ट दूरस्थ डेटा प्राप्त करने के लिए Google सर्वर संसाधनों का उपयोग करती है, और क्लाइंट को JSONP के रूप में वापस लौटाती है।

इसे इस्तेमाल करना बहुत आसान है:

    $.ajax({
        crossOrigin: true,
        url: url,
        success: function(data) {
            console.log(data);
        }
    });

आप यहाँ और अधिक पढ़ सकते हैं: http://www.ajax-cross-origin.com/


22
जहां तक ​​मेरा सवाल है, इस प्लगइन ने कभी काम नहीं किया। यह क्रोम पर कुछ भी नहीं करता है।
माइकल

मैं सर्वर को कैसे प्रमाणित कर सकता हूं?
स्टटैक

बहुत अच्छा काम करता है! मैं जिस API का उपयोग कर रहा हूं वह न तो JSONP है और न ही CORS इसलिए यह एकमात्र ऐसी चीज है जो काम करती है। आपका बहुत बहुत धन्यवाद!
जेपी ल्यू

jQuery का crossOriginविकल्प निश्चित रूप से समान-मूल नीतियों को कम करने के लिए कुछ भी नहीं करता है। यदि मैं कर सकता / सकती हूँ तो मैं इस उत्तर को हटा दूंगा
Phil

13

यदि बाहरी साइट JSONP या CORS का समर्थन नहीं करती है, तो आपका एकमात्र विकल्प प्रॉक्सी का उपयोग करना है।

अपने सर्वर पर एक स्क्रिप्ट बनाएं जो उस सामग्री का अनुरोध करता है, फिर अपने सर्वर पर स्क्रिप्ट को हिट करने के लिए jQuery ajax का उपयोग करें।


5

इसे अपने PHP पेज के हेडर में डालें और यह एपीआई के बिना काम करता है:

header('Access-Control-Allow-Origin: *'); //allow everybody  

या

header('Access-Control-Allow-Origin: http://codesheet.org'); //allow just one domain 

या

$http_origin = $_SERVER['HTTP_ORIGIN'];  //allow multiple domains

$allowed_domains = array(
  'http://codesheet.org',
  'http://stackoverflow.com'
);

if (in_array($http_origin, $allowed_domains))
{  
    header("Access-Control-Allow-Origin: $http_origin");
}

सोच रहा हूं कि कहां $_SERVER['HTTP_ORIGIN']से आ रहा हूं । मैं इसे PHP प्रलेखन में या कहीं और नहीं मिला।
१६:५६ पर जसोलती १s ’

हम्म, ऐसा लगता है कि यह केवल AJAX अनुरोधों के साथ आबाद है। किसी भी तरह, उत्तर के लिए धन्यवाद।
जसोलती

0

मैं इस मामले में पोस्ट कर रहा हूँ किसी को वही समस्या आती है जिसका मैं अभी सामना कर रहा हूँ। मुझे एक ज़ेबरा थर्मल प्रिंटर मिला है, जो ज़ेब्रनेट प्रिंट सर्वर से लैस है, जो कई सेटिंग्स को संपादित करने के लिए HTML-आधारित उपयोगकर्ता इंटरफ़ेस प्रदान करता है, प्रिंटर की वर्तमान स्थिति आदि को देखकर मुझे प्रिंटर की स्थिति प्राप्त करने की आवश्यकता होती है, जो प्रदर्शित होता है ज़ेबनेट सर्वर द्वारा ऑफ़र किए गए उन HTML पृष्ठों में से एक, और उदाहरण के लिए, ब्राउज़र में उपयोगकर्ता के लिए अलर्ट ()। इसका मतलब है कि मुझे उस HTML पेज को पहले जावास्क्रिप्ट में प्राप्त करना होगा। यद्यपि प्रिंटर उपयोगकर्ता के पीसी के लैन के भीतर है, कि समान उत्पत्ति नीतिअभी भी मेरे रास्ते में मजबूती से रह रहा है। मैंने JSONP की कोशिश की, लेकिन सर्वर html को लौटाता है और मुझे इसकी कार्यक्षमता को संशोधित करने का कोई तरीका नहीं मिला है (यदि मैं कर सकता था, तो मैं पहले ही मैजिक हैडर एक्सेस-कंट्रोल-अनुमति-मूल: *) सेट कर दूंगा। इसलिए मैंने C # में एक छोटा सा कंसोल ऐप लिखने का फैसला किया। इसे ठीक से काम करने के लिए व्यवस्थापक के रूप में चलाया जाना चाहिए, अन्यथा यह ट्रोल करता है: एक अपवाद। यहाँ कुछ कोड है:

// Create a listener.
        HttpListener listener = new HttpListener();
        // Add the prefixes.
        //foreach (string s in prefixes)
        //{
        //    listener.Prefixes.Add(s);
        //}
        listener.Prefixes.Add("http://*:1234/"); // accept connections from everywhere,
        //because the printer is accessible only within the LAN (no portforwarding)
        listener.Start();
        Console.WriteLine("Listening...");
        // Note: The GetContext method blocks while waiting for a request. 
        HttpListenerContext context;
        string urlForRequest = "";

        HttpWebRequest requestForPage = null;
        HttpWebResponse responseForPage = null;
        string responseForPageAsString = "";

        while (true)
        {
            context = listener.GetContext();
            HttpListenerRequest request = context.Request;
            urlForRequest = request.RawUrl.Substring(1, request.RawUrl.Length - 1); // remove the slash, which separates the portNumber from the arg sent
            Console.WriteLine(urlForRequest);

            //Request for the html page:
            requestForPage = (HttpWebRequest)WebRequest.Create(urlForRequest);
            responseForPage = (HttpWebResponse)requestForPage.GetResponse();
            responseForPageAsString = new StreamReader(responseForPage.GetResponseStream()).ReadToEnd();

            // Obtain a response object.
            HttpListenerResponse response = context.Response;
            // Send back the response.
            byte[] buffer = System.Text.Encoding.UTF8.GetBytes(responseForPageAsString);
            // Get a response stream and write the response to it.
            response.ContentLength64 = buffer.Length;
            response.AddHeader("Access-Control-Allow-Origin", "*"); // the magic header in action ;-D
            System.IO.Stream output = response.OutputStream;
            output.Write(buffer, 0, buffer.Length);
            // You must close the output stream.
            output.Close();
            //listener.Stop();

सभी उपयोगकर्ता को उस कंसोल ऐप को व्यवस्थापक के रूप में चलाने की आवश्यकता है। मुझे पता है कि यह रास्ता भी है ... निराशाजनक और जटिल, लेकिन यह डोमेन नीति की समस्या का एक हल है, यदि आप सर्वर को किसी भी तरह से संशोधित नहीं कर सकते हैं।

संपादित करें: js से मैं एक सरल अजाक्स कॉल करता हूं:

$.ajax({
                type: 'POST',
                url: 'http://LAN_IP:1234/http://google.com',
                success: function (data) {
                    console.log("Success: " + data);
                },
                error: function (e) {
                    alert("Error: " + e);
                    console.log("Error: " + e);
                }
            });

अनुरोधित पृष्ठ का html डेटा चर में लौटाया और संग्रहीत किया गया है।


0

Jherax द्वारा सुझाए गए स्थानीय प्रॉक्सी का उपयोग करके डेटा फ़ॉर्म बाहरी साइट को प्राप्त करने के लिए आप एक php पेज बना सकते हैं जो आपके लिए संबंधित बाहरी url से सामग्री प्राप्त करता है और उस php पृष्ठ पर एक अनुरोध प्राप्त करने की तुलना में भेजता है।

var req = new XMLHttpRequest();
req.open('GET', 'http://localhost/get_url_content.php',false);
if(req.status == 200) {
   alert(req.responseText);
}

php प्रॉक्सी के रूप में आप https://github.com/cowboy/php-simple-proxy का उपयोग कर सकते हैं


0

आपका URLकाम इन दिनों नहीं है, लेकिन आपके कोड को इस कार्य समाधान के साथ अपडेट किया जा सकता है:

var url = "http://saskatchewan.univ-ubs.fr:8080/SASStoredProcess/do?_username=DARTIES3-2012&_password=P@ssw0rd&_program=%2FUtilisateurs%2FDARTIES3-2012%2FMon+dossier%2Fanalyse_dc&annee=2012&ind=V&_action=execute";

url = 'https://google.com'; // TEST URL

$.get("https://images"+~~(Math.random()*33)+"-focus-opensocial.googleusercontent.com/gadgets/proxy?container=none&url=" + encodeURI(url), function(data) {
    $('div.ajax-field').html(data);
});
<div class="ajax-field"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


-2

आपको CORS प्रॉक्सी की आवश्यकता होती है जो आपके ब्राउज़र से आपके अनुरोध को उपयुक्त CORS हेडर के साथ अनुरोधित सेवा में सम्‍मिलित करता है । ऐसी सेवाओं की सूची नीचे दिए गए कोड स्निपेट में हैं। आप अपने स्थान से ऐसी सेवाओं के लिए पिंग देखने के लिए प्रदान किए गए कोड स्निपेट भी चला सकते हैं।

$('li').each(function() {
  var self = this;
  ping($(this).text()).then(function(delta) {
    console.log($(self).text(), delta, ' ms');
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/jdfreder/pingjs/c2190a3649759f2bd8569a72ae2b597b2546c871/ping.js"></script>
<ul>
  <li>https://crossorigin.me/</li>
  <li>https://cors-anywhere.herokuapp.com/</li>
  <li>http://cors.io/</li>
  <li>https://cors.5apps.com/?uri=</li>
  <li>http://whateverorigin.org/get?url=</li>
  <li>https://anyorigin.com/get?url=</li>
  <li>http://corsproxy.nodester.com/?src=</li>
  <li>https://jsonp.afeld.me/?url=</li>
  <li>http://benalman.com/code/projects/php-simple-proxy/ba-simple-proxy.php?url=</li>
</ul>


11
यह किसी भी तरह से सवाल का जवाब नहीं देता है।
0xc0de

@ 0xc0de मैं अंत में जवाब लिखा है।
ग्लीकेन्डरप

-7

पता लगा लिया। इसके बजाय इसका इस्तेमाल किया।

$('.div_class').load('http://en.wikipedia.org/wiki/Cross-origin_resource_sharing #toctitle');

आपके द्वारा उपयोग किया गया कोड अप्रासंगिक है। सर्वर साइड कॉर्स हेडर क्या मायने रखता है।
क्वेंटिन
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.