XmlHttpRequest त्रुटि: मूल नल को Access-Control-Allow-Origin द्वारा अनुमति नहीं है

Question

मैं एक पेज विकसित कर रहा हूं, जो फ़्लिकर और पैनोरैमियो की छवियों को jQuery के AJAX समर्थन के माध्यम से खींचता है।

फ़्लिकर पक्ष ठीक काम कर रहा है, लेकिन जब मैं $.get(url, callback)पैनोरैमियो से कोशिश करता हूं, तो मुझे क्रोम के कंसोल में एक त्रुटि दिखाई देती है:

XMLHttpRequest http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback-processImages&minx=-30&maxx=0&maxx=0&maxy=150 पर लोड नहीं किया जा सकता । Access-Control-Allow-Origin द्वारा मूल नल की अनुमति नहीं है।

अगर मैं उस URL को सीधे ब्राउज़र से क्वेरी करता हूं तो यह ठीक काम करता है। क्या चल रहा है, और क्या मैं इसे प्राप्त कर सकता हूं? क्या मैं अपनी क्वेरी गलत तरीके से लिख रहा हूं, या यह कुछ ऐसा है जो पैनोरामियो को बाधा है कि मैं क्या करने की कोशिश कर रहा हूं?

Google ने त्रुटि संदेश पर कोई उपयोगी मिलान चालू नहीं किया ।

संपादित करें

यहाँ कुछ नमूना कोड है जो समस्या दिखाता है:

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';

  $.get(url, function (jsonp) {
    var processImages = function (data) {
      alert('ok');
    };

    eval(jsonp);
  });
});

आप उदाहरण ऑनलाइन चला सकते हैं ।

EDIT 2

इसके लिए उनकी मदद के लिए डारिन को धन्यवाद। अबू कोड गलत है। इसके बजाय इसका उपयोग करें:

$().ready(function () {
  var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';

  $.get(url, function (data) {
    // can use 'data' in here...
  });
});

Comments

क्या करता है की तरह है कि आप अनुरोध कर रहे हैं यूआरएल नज़र से ? उदाहरण के लिए, iframeयह गतिशील रूप से उत्पन्न होने वाला नहीं होता है document.write?

— पेका

क्या आप प्रत्येक सेवा के लिए अनुरोध से HTTP प्रतिक्रिया पोस्ट कर सकते हैं। मुझे यकीन है कि पैनोरामियो एक्सेस-कंट्रोल-अलाउ-ओरिजिन की सेवा नहीं दे रहा है। उदाहरण के लिए w3.org/TR/cors देखें ।

— केविन हैकसन

यदि सर्वर JSONP भेजता है तो @Kevin, आपको उन हेडर की आवश्यकता नहीं है।

— डारिन दिमित्रोव

@Pekka, मैं इस समय अपनी स्थानीय मशीन से पृष्ठ चला रहा हूं ( file:///C:/)। कोई iframeशामिल नहीं है।

— आकर्षित नोक

@ यदि आप इसे http URL से चलाते हैं तो क्या होगा? इसे इस तरह से अंतर नहीं करना चाहिए, लेकिन संभावना को बाहर करने के लिए।

— पेका

Answer 1

रिकॉर्ड के लिए, जहां तक ​​मैं बता सकता हूं, आपको दो समस्याएं थीं:

1. आप अपने लिए "jsonp" प्रकार निर्दिष्ट नहीं कर रहे थे $.get, इसलिए यह एक सामान्य XMLHttpRequest का उपयोग कर रहा था। हालाँकि, आपके ब्राउज़र ने CORS (क्रॉस-ओरिजिनल रिसोर्स शेयरिंग) को क्रॉस-डोमेन XMLHttpRequest की अनुमति देने के लिए समर्थन किया है यदि सर्वर इसे ठीक करता है। वहीं Access-Control-Allow-Originहेडर आया।

2. मेरा मानना ​​है कि आपने उल्लेख किया है कि आप इसे एक फ़ाइल से चला रहे थे: // URL। कॉर्स हेडर्स के लिए संकेत करने के दो तरीके हैं कि क्रॉस-डोमेन XHR ठीक है। एक को भेजना है Access-Control-Allow-Origin: *(जो, अगर आप फ़्लिकर के माध्यम से पहुंच रहे थे, तो $.getवे कर रहे होंगे) जबकि दूसरा Originहेडर की सामग्री को प्रतिध्वनित करना था । हालाँकि, file://URL एक नल का उत्पादन करते हैं Originजिसे echo-back के माध्यम से अधिकृत नहीं किया जा सकता है।

पहले का उपयोग करने के डारिन के सुझाव से एक गोल चक्कर रास्ते में हल किया गया था $.getJSON। यदि यह callback=?URL में सबस्ट्रिंग को देखता है, तो यह "json" के अपने डिफ़ॉल्ट से "jsonp" के अनुरोध प्रकार को बदलने के लिए थोड़ा जादू करता है ।

अब file://URL से CORS अनुरोध करने की कोशिश करने से दूसरा हल हो गया ।

अन्य लोगों के लिए स्पष्ट करने के लिए, यहाँ सरल समस्या निवारण निर्देश हैं:

1. यदि आप JSONP का उपयोग करने का प्रयास कर रहे हैं, तो सुनिश्चित करें कि निम्नलिखित में से एक मामला है:
   • आप उपयोग कर रहे हैं $.getऔर सेट dataTypeकरने के लिए jsonp।
   • आप URL में उपयोग कर रहे हैं $.getJSONऔर शामिल हैं callback=?।
2. यदि आप एक क्रॉस-डोमेन XMLHttpRequest करने की कोशिश कर रहे हैं तो CORS ...
   1. सुनिश्चित करें कि आप के माध्यम से परीक्षण कर रहे हैं http://। के माध्यम से चल रहे लिपियों file://को कोर के लिए सीमित समर्थन है।
   2. सुनिश्चित करें कि ब्राउज़र वास्तव में CORS का समर्थन करता है । (ओपेरा और इंटरनेट एक्सप्लोरर पार्टी के लिए देर से हैं)

Comments

तो इसका समाधान क्या है?

— 21

कॉलबैक =? FTW

— टिम

क्रोम जैसे कुछ ब्राउज़र अगर

— कोरस को

callback=?मेरे लिए काम नहीं किया, लेकिन jsonp=?किया। उसके लिए कोई स्पष्टीकरण?

— क्रंकटाइटिस

क्या मुझे परीक्षण के लिए एक वेबसर्वर स्थापित करना है http://? या फिर उस प्रोटोकॉल का उपयोग करके फ़ाइल को खोलने का एक तरीका है?

— विल सीसेल

Answer 2

आपको अपनी तथाकथित स्क्रिप्ट में एक हेडर जोड़ने की आवश्यकता है, यहाँ वही है जो मुझे PHP में करना था:

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

क्रॉस डोमेन AJAX में अधिक जानकारी WEB (फ्रेंच में) सेवाओं ।

Comments

@ यूरी: आपके HTTP सर्वर पर निर्भर करता है। अपाचे के साथ, आप mod_headers में देखना चाहेंगे।

— ssokolow

@ यूरी <मेटा http-इक्विव = "एक्सेस-कंट्रोल-

— अलाउंस

@ हेबरथअमरल मैंने इसे <head> </ head> के अंदर जोड़ने की कोशिश की, लेकिन यह मेरे लिए काम नहीं करता है। मैं इसे आईओएस सफारी और क्रोम में आज़मा रहा हूं, लेकिन कंसोल में, मुझे मूल नल प्राप्त होता है जिसे एक्सेस-कंट्रोल-अनुमति-उत्पत्ति त्रुटि की अनुमति नहीं है।

— thandasoru

यह सुरक्षा कारणों से html फ़ाइल के प्रमुख में काम नहीं करता है। इसका एक हेडर होना है। stackoverflow.com/questions/7015782/…

— जस्टिन ब्लैंक

यह HTML में नहीं हो सकता। इसे उस प्रोग्राम द्वारा निर्दिष्ट किया जाना है जो नेटवर्क पर HTML ब्राउज़र को भेज रहा है (जिसे वेब सर्वर कहा जाता है)।

— रोमन प्लेज़िल

Answer 3

एक साधारण HTML प्रोजेक्ट के लिए:

cd project
python -m SimpleHTTPServer 8000

फिर अपनी फ़ाइल ब्राउज़ करें।

Comments

जब आप 0.0.0.0:8000 पर जाते हैं, तो बहुत बढ़िया और काम करता है, और POSTआपको प्राप्त होने वाले अनुरोधों को आज़माएँ : code 501, message Unsupported method ('POST')गुगलों के लिए।

— pjammer

"जब एक पायथन वेब सर्वर (उदाहरण के लिए चेरी की तरह) कहता है कि यह 0.0.0.0 पर सेवारत है तो इसका मतलब है कि यह सभी टीसीपी ट्रैफ़िक के लिए सुन रहा है जो उस मशीन पर समाप्त होता है, जो होस्टनाम या आईपी से अनुरोध किया गया था।" इसलिए शायद लोकलहोस्ट पर पोस्ट करने की कोशिश करें: 8000 stackoverflow.com/a/4341808/102022

— eric.christensen

Answer 4

मेरे लिए Google Chrome पर काम करता है v5.0.375.127 (मुझे अलर्ट मिलता है):

$.get('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
    alert(json.photos[1].photoUrl);
});

इसके अलावा, मैं आपको $.getJSON()इसके बजाय विधि का उपयोग करने की सिफारिश करूंगा क्योंकि पिछला IE8 पर काम नहीं करता है (कम से कम मेरी मशीन पर):

$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150', 
function(json) {
    alert(json.photos[1].photoUrl);
});

आप इसे यहाँ से ऑनलाइन कोशिश कर सकते हैं ।

---

अपडेट करें:

अब जब आपने अपना कोड दिखाया है तो मैं इसके साथ समस्या देख सकता हूं। आपके पास एक अनाम फ़ंक्शन और इनलाइन फ़ंक्शन दोनों हैं, लेकिन दोनों को बुलाया जाएगा processImages। इस तरह jQuery का JSONP समर्थन काम करता है। ध्यान दें कि मैं कैसे परिभाषित कर रहा हूं callback=?ताकि आप एक अनाम फ़ंक्शन का उपयोग कर सकें। आप प्रलेखन में इसके बारे में अधिक पढ़ सकते हैं ।

एक और टिप्पणी यह ​​है कि आपको eval नहीं कहना चाहिए। आपके अनाम फ़ंक्शन के लिए दिया गया पैरामीटर पहले ही jQuery द्वारा JSON में पार्स कर दिया जाएगा।

Comments

हम्म ठीक है मुझे फिर से कोशिश करें। मैं क्रोम btw के एक अलग संस्करण पर हूँ "6.0.472.51 बीटा"।

— आकर्षित नोक

आपके कोड ने मेरे लिए काम किया। मैंने अपने प्रश्न को कुछ कोड के साथ अपडेट किया जो समस्या को हल करता है।

— आकर्षित नोक

टिप के लिए धन्यवाद फिर से GetJSON ... मैंने समस्या को दर्शाने के लिए आपके jsFiddle उदाहरण को forked किया ( jsfiddle.net/ZfvKm ) और अब त्रुटि संदेश देखें XMLHttpRequest लोड नहीं कर सकता panoramio.com/hi/data/… । उत्पत्ति fiddle.jshell.net को एक्सेस-कंट्रोल-अनुमति-उत्पत्ति द्वारा अनुमति नहीं है।

— आकर्षित नोक

@ डारिन, अपडेट के लिए धन्यवाद। मैं आपकी बात देख रहा हूं, और मैंने इसके कुछ संयोजनों के साथ खेला है, लेकिन मुझे अभी तक लौटी हुई वस्तु तक पहुंचने का कोई रास्ता नहीं मिला है। क्या आप डेटा तक पहुँचने के लिए अपना jsFiddle उदाहरण अपडेट कर सकते हैं? यदि आप कॉलबैक सेट करते हैं ?तो लौटा JSON को कोष्ठक से घिरा हुआ है। आप अपने कॉलबैक फ़ंक्शन के लिए एक पैरामीटर को परिभाषित नहीं करते हैं, और thisप्रतिक्रिया ऑब्जेक्ट (कम से कम, .dataमान है null) के लिए मान नहीं लगता है ।

— आकर्षित नोक

@ डारिन, शानदार। बहुत धन्यवाद। अब अच्छी तरह से काम कर रहा है। इसे पढ़ने वाले किसी अन्य व्यक्ति के लिए, callback=?jQuery का समावेश आंतरिक रूप से एक यादृच्छिक फ़ंक्शन नाम उत्पन्न करने के लिए बताता है, जिसके परिणामस्वरूप अनाम फ़ंक्शन के पास कॉल होता है .getJSON। की सराहना की।

— ड्रू नोक

Answer 5

जब तक अनुरोध किया गया सर्वर JSON डेटा प्रारूप का समर्थन करता है, तब तक JSONP (JSON Padding) इंटरफ़ेस का उपयोग करें। यह आपको प्रॉक्सी सर्वर या फैंसी हेडर सामान के बिना बाहरी डोमेन अनुरोध करने की अनुमति देता है।

Answer 6

यह समान मूल नीति है , आपको JSON-P इंटरफ़ेस या उसी होस्ट पर चलने वाले प्रॉक्सी का उपयोग करना होगा।

Answer 7

हमने इसे http.confफ़ाइल के माध्यम से प्रबंधित किया (संपादित किया और फिर HTTP सेवा को फिर से शुरू किया):

<Directory "/home/the directory_where_your_serverside_pages_is">
    Header set Access-Control-Allow-Origin "*"
    AllowOverride all
    Order allow,deny
    Allow from all
</Directory>

में Header set Access-Control-Allow-Origin "*", आप एक सटीक URL डाल सकते हैं।

Comments

यह XAMPP के अपाचे पर काम नहीं करता है। समस्या अभी भी मौजूद है।

— Raptor

यह असुरक्षित है। यहाँ देखें क्यों; stackoverflow.com/questions/7564832/…

— रोब

यह @RobQuist ने कहा कि यह असुरक्षित है।

— d337

Answer 8

यदि आप स्थानीय परीक्षण कर रहे हैं या फाइल को कुछ इस तरह से बुला रहे हैं file://तो आपको ब्राउज़र सुरक्षा को अक्षम करने की आवश्यकता है।

मैक पर: open -a Google\ Chrome --args --disable-web-security

Answer 9

मेरे मामले में, समान कोड ने फ़ायरफ़ॉक्स पर ठीक काम किया, लेकिन Google क्रोम पर नहीं। Google Chrome के जावास्क्रिप्ट कंसोल ने कहा:

XMLHttpRequest cannot load http://www.xyz.com/getZipInfo.php?zip=11234. 
Origin http://xyz.com is not allowed by Access-Control-Allow-Origin.
Refused to get unsafe header "X-JSON"

मुझे इसके मूल स्रोत के साथ सही मिलान करने के लिए अजाक्स URL का www भाग छोड़ना पड़ा और यह तब ठीक काम किया।

Answer 10

सभी सर्वर jsonp का समर्थन नहीं करते हैं। इसके परिणाम में कॉलबैक फ़ंक्शन सेट करने के लिए सर्वर की आवश्यकता होती है। मैं इसका उपयोग उन साइटों से json प्रतिक्रियाएं प्राप्त करने के लिए करता हूं जो शुद्ध json लौटाती हैं, लेकिन jsonp का समर्थन नहीं करती हैं:

function AjaxFeed(){

    return $.ajax({
        url:            'http://somesite.com/somejsonfile.php',
        data:           {something: true},
        dataType:       'jsonp',

        /* Very important */
        contentType:    'application/json',
    });
}

function GetData() {
    AjaxFeed()

    /* Everything worked okay. Hooray */
    .done(function(data){
        return data;
    })

    /* Okay jQuery is stupid manually fix things */
    .fail(function(jqXHR) {

        /* Build HTML and update */
        var data = jQuery.parseJSON(jqXHR.responseText);

        return data;
    });
}

Answer 11

मैं अपाचे सर्वर का उपयोग करता हूं, इसलिए मैंने 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 12

अंतिम नोट के रूप में मोज़िला प्रलेखन स्पष्ट रूप से कहता है कि

यदि हेडर वाइल्डकार्ड के रूप में: एक्सेस-कंट्रोल-अलाउंस-ओरिजिन: * से ऊपर हो तो असफल हो जाएगा । चूंकि Access-Control-Allow-Origin ने स्पष्ट रूप से http: //foo.example का उल्लेख किया है , इसलिए क्रेडेंशियल- कॉग्निजेंट सामग्री को इनवॉइसिंग वेब सामग्री पर लौटा दिया जाता है।

परिणाम के रूप में '*' का उपयोग करने के लिए एक बुरा अभ्यास नहीं है। बस काम नहीं करता है :)

Answer 13

PHP के लिए - क्रोम, सफारी और फ़ायरफ़ॉक्स पर यह काम मेरे लिए है

https://w3c.github.io/webappsec-cors-for-developers/#avoid-returning-access-control-allow-origin-null

header('Access-Control-Allow-Origin: null');

फ़ाइल के साथ axios कॉल php लाइव सेवाओं का उपयोग करना: //

Comments

यह भी मेरे लिए काम करता है, ध्यान दें कि कैसे अशक्त एक STRING है और वास्तविक NULL नहीं है। मैं इसे header('Access-Control-Allow-Origin: '.( trim($_SERVER['HTTP_REFERER'],'/') ?:'null'),true);एक दूरस्थ सर्वर से दूसरे के रूप में अच्छी तरह से पार करने की अनुमति देता हूं और स्थानीय फ़ाइल के लिए (स्ट्रिंग) नल की ओर गिरता हूं ।

— लुई लाउडोग ट्रोटियर

Answer 14

मुझे क्रोम में भी यही त्रुटि मिली (मैंने अन्य ब्राउजर का परीक्षण नहीं किया)। यह इस तथ्य के कारण था कि मैं www.domain.com के बजाय domain.com पर नेविगेट कर रहा था। थोड़ा अजीब है, लेकिन मैं .htaccess में निम्नलिखित पंक्तियों को जोड़कर समस्या को हल कर सकता हूं। यह domain.com को www.domain.com पर पुनर्निर्देशित करता है और समस्या हल हो गई। मैं एक आलसी वेब विज़िटर हूं, इसलिए मैं लगभग कभी भी www टाइप नहीं करता हूं, लेकिन जाहिर है कि कुछ मामलों में इसकी आवश्यकता होती है।

RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]

Answer 15

सुनिश्चित करें कि आप JQuery के नवीनतम संस्करण का उपयोग कर रहे हैं। हम JQuery 1.10.2 के लिए इस त्रुटि का सामना कर रहे थे और JQuery 1.11.1 का उपयोग करने के बाद त्रुटि हल हो गई

Answer 16

मित्रों,

मैं इसी तरह के मुद्दे पर भाग गया। लेकिन फिडलर का उपयोग करके, मैं इस मुद्दे पर पहुंचने में सक्षम था। समस्या यह है कि वेब API साइड पर CORS कार्यान्वयन में कॉन्फ़िगर किए गए क्लाइंट URL में अनुगामी फ़ॉरवर्ड-स्लैश नहीं होना चाहिए। गूगल क्रोम के माध्यम से अपना अनुरोध सबमिट करने और निरीक्षण के बाद TextView के टैब हेडर फ़िडलर की धारा, त्रुटि संदेश में कहा गया है कुछ इस तरह:

* "निर्दिष्ट नीति आपके मूल__शाल_ को उद्घाटित करती है: / 'अमान्य है। यह आगे की स्लैश के साथ समाप्त नहीं हो सकती है।"

यह वास्तविक विचित्र है क्योंकि इसने इंटरनेट एक्सप्लोरर पर बिना किसी समस्या के काम किया, लेकिन Google Chrome का उपयोग करते समय मुझे सिरदर्द दिया।

मैंने कॉर्स कोड में फ़ॉरवर्ड-स्लैश को हटा दिया और वेब एपीआई को फिर से जोड़ दिया, और अब एपीआई बिना किसी समस्या के क्रोम और इंटरनेट एक्सप्लोरर के माध्यम से सुलभ है। कृपया इसे एक शॉट दें।

धन्यवाद, एंडी

Answer 17

ऊपर CodeGroover द्वारा पोस्ट किए गए समाधान में एक छोटी सी समस्या है , जहां यदि आप एक फ़ाइल बदलते हैं, तो आपको वास्तव में अपडेटेड फ़ाइल (कम से कम, मेरे मामले में) का उपयोग करने के लिए सर्वर को पुनरारंभ करना होगा।

इसलिए थोड़ा खोज करने पर, मुझे यह उपयोग करने के लिए मिला :

sudo npm -g install simple-http-server # to install
nserver # to use

और फिर यह सेवा करेगा http://localhost:8000।

Comments

हालांकि यह लिंक प्रश्न का उत्तर दे सकता है, लेकिन उत्तर के आवश्यक भागों को शामिल करना और संदर्भ के लिए लिंक प्रदान करना बेहतर है। लिंक-केवल उत्तर अमान्य हो सकते हैं यदि लिंक किए गए पृष्ठ बदल जाते हैं। - समीक्षा से

— Vi100

लिंक को स्पष्ट किया।

— मिजन