एक्सेस-कंट्रोल-अनुमति-उत्पत्ति द्वारा उत्पत्ति की अनुमति नहीं है


337

मैं Ajax.requestएक Sencha टच में एक दूरस्थ PHP सर्वर के लिए कर रहा हूँ 2 अनुप्रयोग ( PhoneGap में लिपटे ) में ।

सर्वर से प्रतिक्रिया निम्नलिखित है:

XMLHttpRequest http://nqatalog.negroesquisso.pt/login.php लोड नहीं कर सकता । मूलhttp://localhost:8888एक्सेस-कंट्रोल-अनुमति-उत्पत्ति द्वारा की अनुमति नहीं है।

मैं इस समस्या को कैसे ठीक करुं?


19
jQuery का उपयोग करते समय, सेटिंग dataType: 'jsonp',ट्रिक करती है
amit

11
वैसे जो सर्वर से प्रतिक्रिया नहीं है। सटीक होने के लिए कि क्लाइंट की ओर से त्रुटि जारी की जाती है।
मैटो

2
Jsonp ट्रिक शायद अब काम नहीं करता है,
फी

7
ध्यान दें, चूंकि मैंने इस बग का पीछा करते हुए सिर्फ आधा दिन बर्बाद किया है - यदि सर्वर साइड स्क्रिप्ट एक आंतरिक सर्वर त्रुटि के साथ विफल हो जाती है, तो ब्राउज़र इसकी व्याख्या कर सकता है जैसे कि अनुरोध के कारण अनुमति नहीं दी गई थी Access-Control-Allow-Originऔर इसे त्रुटि के रूप में रिपोर्ट करें।
troelskn

1
@troelskn आपने सिर्फ मेरी जान बचाई। मैं 3 दिनों से कुछ CORS गलती की खोज कर रहा था, और यह बस 500 के कारण थोड़ा स्प्रिंग कॉन्फ़िगरेशन की समस्या थी, जिसे मैंने आपकी टिप्पणी पढ़ने के बाद 5 मिनट में हल कर दिया था और मुझे वास्तव में इसकी तलाश थी। धन्यवाद!
एलेक्सिस डुफ्रेनॉय

जवाबों:


378

मैंने कुछ समय पहले इस मुद्दे पर एक लेख लिखा था, क्रॉस डोमेन AJAX

यदि आपके पास प्रतिक्रिया देने वाले सर्वर का नियंत्रण है, तो इसे संभालने का सबसे आसान तरीका है:

Access-Control-Allow-Origin: *

यह क्रॉस-डोमेन अजाक्स की अनुमति देगा । PHP में, आप इस तरह की प्रतिक्रिया को संशोधित करना चाहेंगे:

<?php header('Access-Control-Allow-Origin: *'); ?>

आप बस अपाचेHeader set Access-Control-Allow-Origin * में सेटिंग डाल सकते हैं कॉन्फ़िगरेशन या htaccess फ़ाइल ।

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

<?php header('Access-Control-Allow-Origin: http://example.com') ?>

4
मैं अपने सर्वर प्रदाता से संपर्क करूंगा। साभार
रिकार्डो

8
क्या इसके साथ कोई सुरक्षा चिंताएं हैं? यह जवाब , उदाहरण के लिए, "जावास्क्रिप्ट सुरक्षा कारणों से" उसी मूल नीति "द्वारा सीमित है, उदाहरण के लिए, एक दुर्भावनापूर्ण स्क्रिप्ट एक दूरस्थ सर्वर से संपर्क नहीं कर सकती है और आपकी साइट से संवेदनशील डेटा भेज सकती है।"
१४ पर जॉनके

4
बहुत बढ़िया, मैंने इसे केवल अपने नोड.जेएस सर्वर फ़ाइल में रखा: response.writeHead (200, {'Content-Type': contentType, 'Access-Control-Allow-Origin': '*' '); और इसने काम किया। धन्यवाद!
vbullinger

25
जॉन, हाँ, वाइल्डकार्ड आपके डोमेन को किसी भी डोमेन को अनुरोध भेजने की अनुमति देने जा रहा है। मैं एक विशिष्ट डोमेन के साथ तारांकन की जगह लेने की सलाह देता हूं जिस पर आप स्क्रिप्ट चला रहे होंगे।
निक

7
यह दिलचस्प है कि आपको लगता है कि वाइल्डकार्ड को @jfrej भी नहीं बताया जाना चाहिए। यह सब आपके लक्ष्य पर निर्भर करता है। उदाहरण के लिए, हमने वाइल्डकार्ड का उपयोग करने का कारण (और इस उत्तर को पोस्ट किया) था क्योंकि हम किसी भी साइट का उपयोग करने के लिए एक एम्बेडेड विजेट का निर्माण कर रहे थे।
मैट मोम्ब्रे

63

यदि आपके पास सर्वर का नियंत्रण नहीं है, तो आप बस इस तर्क को अपने Chrome लॉन्चर में जोड़ सकते हैं --disable-web-security:।

ध्यान दें कि मैं इसका उपयोग सामान्य "वेब सर्फिंग" के लिए नहीं करूंगा। संदर्भ के लिए, यह पोस्ट देखें: Chrome में समान मूल नीति अक्षम करें

वास्तव में आप एप्लिकेशन का निर्माण करने और उसे डिवाइस पर लोड करने के लिए फोनगैप का उपयोग करते हैं, यह एक समस्या नहीं होगी।


धन्यवाद। लेकिन मेरा ऐप मोबाइल उपकरणों पर चल रहा है, मैं अपने वेबव्यू रैपर के लिए तर्क दे सकता हूं।
रिकार्डो

क्या आप पहले किसी ब्राउज़र में अपने ऐप का परीक्षण नहीं करते हैं? आप डिबग कैसे करते हैं?
ट्रैविस वेब

हाँ, मैं क्रोम ब्राउज़र में डीबग करता हूं, लेकिन ऐप क्रोम पर नहीं चलता। यह फोनगैप वेबव्यू विच आई कैंट कंट्रोल पर होगा।
रिकार्डो

4
उत्तर पढ़ें: आप अपने Chrome लॉन्चर में बस इस तर्क को जोड़ सकते हैं । Chrome के अंदर इसके लिए कोई सेटिंग नहीं है
ट्रैविस वेब

2
बेशक यह असुरक्षित है। ओपी सुरक्षा उपायों के बारे में एक रास्ता पूछ रहा है।
ट्रैविस वेब

42

यदि आप अपाचे का उपयोग कर रहे हैं तो बस जोड़ें:

<ifModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</ifModule>

आपके विन्यास में। यह आपके वेबसर्वर के सभी प्रतिक्रियाओं को इंटरनेट पर किसी अन्य साइट से सुलभ होने का कारण होगा। यदि आप अपने होस्ट पर केवल एक विशिष्ट सर्वर द्वारा उपयोग की जाने वाली सेवाओं की अनुमति देने का इरादा रखते हैं तो आप *मूल सर्वर के URL से बदल सकते हैं :

Header set Access-Control-Allow-Origin: http://my.origin.host

3
और मॉड्यूल लोड करने के लिए मत भूलना: a2enmod हेडर
Walery Strauch

मॉड्यूल लोड करने के लिए कैसे: a2enmod हेडर?
आयशा

18

यदि आपके पास ASP.NET / ASP.NET MVC अनुप्रयोग है, तो आप इस हेडर को Web.config फ़ाइल के माध्यम से शामिल कर सकते हैं:

<system.webServer>
  ...

    <httpProtocol>
        <customHeaders>
            <!-- Enable Cross Domain AJAX calls -->
            <remove name="Access-Control-Allow-Origin" />
            <add name="Access-Control-Allow-Origin" value="*" />
        </customHeaders>
    </httpProtocol>
</system.webServer>

2
.NET MVC के लोग, यहाँ देखें! मैं वास्तव में एक समाधान टाइप करने जा रहा हूं और अपने ब्लॉग पर इस उत्तर को इंगित कर रहा हूं ताकि लोग इसे आसान बना सकें। .NET / MVC बाधा को पार करने की कोशिश करने और PHP / jQuery समाधानों के अलावा कुछ भी नहीं पाने से बदतर कुछ भी नहीं है। धन्यवाद @ कैओ-प्रोएटी
ottoflux

1
यह मेरे लिए कैसे काम नहीं करता है? मैं Chrome का उपयोग कर रहा हूं और अपने स्थानीय होस्ट से याहू वित्त पृष्ठ तक पहुंचने का प्रयास कर रहा हूं।
न्यूमैन

1
धन्यवाद यह मेरे लिए काम किया। मैंने सर्वर साइड कोड प्रोजेक्ट (web.config) में जोड़ा है।
एतेम

15

यह पहला प्रश्न / उत्तर था जो मेरे डेटा के स्रोत के रूप में ASP.NET MVC का उपयोग करके उसी समस्या को हल करने की कोशिश करते समय मेरे लिए पॉप अप हुआ । मुझे पता है कि यह PHP को हल नहीं करता है सवाल को , लेकिन यह मूल्यवान होने के लिए पर्याप्त है।

मैं ASP.NET MVC का उपयोग कर रहा हूं। ग्रेग Brant से ब्लॉग पोस्ट मेरे लिए काम किया। अंततः, आप एक विशेषता बनाते हैं [HttpHeaderAttribute("Access-Control-Allow-Origin", "*")], जिसे आप नियंत्रक क्रियाओं में जोड़ने में सक्षम हैं।

उदाहरण के लिए:

public class HttpHeaderAttribute : ActionFilterAttribute
{
    public string Name { get; set; }
    public string Value { get; set; }
    public HttpHeaderAttribute(string name, string value)
    {
        Name = name;
        Value = value;
    }

    public override void OnResultExecuted(ResultExecutedContext filterContext)
    {
        filterContext.HttpContext.Response.AppendHeader(Name, Value);
        base.OnResultExecuted(filterContext);
    }
}

और फिर इसके साथ उपयोग करना:

[HttpHeaderAttribute("Access-Control-Allow-Origin", "*")]
public ActionResult MyVeryAvailableAction(string id)
{
    return Json( "Some public result" );
}

1
WebApi 2 को अब इसमें बनाया गया है। asp.net/web-api/overview/security/…
मैट फियर

10

चूंकि मैट मोम्बरे सर्वर साइड के लिए सही है, आप एक और समस्या में भाग सकते हैं जो श्वेतसूची अस्वीकृति है।

आपको अपना phonegap.plist कॉन्फ़िगर करना होगा। (मैं फोनगैप के पुराने संस्करण का उपयोग कर रहा हूं)

कॉर्डोवा के लिए, नामकरण और निर्देशिका में कुछ बदलाव हो सकते हैं। लेकिन कदम ज्यादातर एक ही होना चाहिए।

सबसे पहले सपोर्टिंग फाइल्स> PhoneGap.plist को चुनें

यहां छवि विवरण दर्ज करें

इसके बाद "विदेशवासी" के तहत

शायद " http://nqatalog.negroesquisso.pt " के मूल्य के साथ एक प्रविष्टि जोड़ें, मैं केवल डीबगिंग के लिए * का उपयोग कर रहा हूं।

यहां छवि विवरण दर्ज करें


8

यह किसी ऐसे व्यक्ति के लिए उपयोगी हो सकता है, जिसे रेफ़र के 'www' और 'non-www' दोनों संस्करणों के लिए अपवाद की आवश्यकता हो:

 $referrer = $_SERVER['HTTP_REFERER'];
 $parts = parse_url($referrer);
 $domain = $parts['host'];

 if($domain == 'google.com')
 {
         header('Access-Control-Allow-Origin: http://google.com');
 }
 else if($domain == 'www.google.com')
 {
         header('Access-Control-Allow-Origin: http://www.google.com');
 }

मुझे सही दिशा में ACAO त्रुटि azure के साथ हल करने के लिए कहा। जबकि मैंने googledrive के होस्टनाम की अनुमति दी थी। URL का उपयोग किया जाना चाहिए googledrive नहीं googledrive
Kildareflare

7

मैं आपको इसके लिए एक सरल उपाय दूंगा। मेरे मामले में मेरे पास सर्वर तक पहुंच नहीं है। उस स्थिति में आप अपने Google Chrome ब्राउज़र में सुरक्षा नीति को एक्सेस-कंट्रोल-अनुमति-उत्पत्ति की अनुमति देने के लिए बदल सकते हैं । यह बहुत सरल है:

  1. Chrome ब्राउज़र शॉर्टकट बनाएं
  2. शॉर्ट कट आइकन पर राइट क्लिक करें -> गुण -> शॉर्टकट -> लक्ष्य

में सरल पेस्ट "C:\Program Files\Google\Chrome\Application\chrome.exe" --allow-file-access-from-files --disable-web-security

स्थान भिन्न हो सकता है। अब उस शॉर्टकट पर क्लिक करके क्रोम खोलें।


7

जब मैं विभिन्न APIs के साथ काम कर रहा हूं तो मैंने इसे कुछ बार चलाया है। अक्सर एक त्वरित फिक्स "और कॉलबैक =" जोड़ना है? एक स्ट्रिंग के अंत में। कभी-कभी एम्परसैंड को एक चरित्र कोड होना चाहिए, और कभी-कभी "?": "? कॉलबैक =?" ( jQuery के साथ पूर्वानुमान .io एपीआई उपयोग देखें )


6

सुनिश्चित करें कि आप अपने लिए एपीआई आधार URL को शामिल किया है अगर आप एक Chrome एक्सटेंशन इस त्रुटि लेखन और मिल रहे हैं, तो जा manifest.jsonके अनुमतियों ब्लॉक , उदाहरण:

"permissions": [
    "https://itunes.apple.com/"
]

6

यह एक ही मूल नीति के कारण हैमोज़िला डेवलपर नेटवर्क या विकिपीडिया पर अधिक देखें

मूल रूप से, आपके उदाहरण में, आपको http://nqatalog.negroesquisso.pt/login.phpकेवल पृष्ठ लोड करने की आवश्यकता है nqatalog.negroesquisso.pt, नहीं localhost


1
लेकिन मुझे मोबाइल डिवाइस से वेबबेस सेवा लोड करने की आवश्यकता है, मैं इसे बायपास करूंगा?
रिकार्डो

वैसे आपको कुछ सर्वर-साइड परिवर्तन करने की आवश्यकता है या JSONP en.wikipedia.org/wiki/JSONP
antyrat

6

यदि आप अपाचे के अधीन हैं, तो इस सामग्री के साथ अपनी निर्देशिका में एक .htaccess फ़ाइल जोड़ें:

Header set Access-Control-Allow-Origin: *

Header set Access-Control-Allow-Headers: content-type

Header set Access-Control-Allow-Methods: *

5

में रूबी ऑन रेल्स , आप एक नियंत्रक में कर सकते हैं:

headers['Access-Control-Allow-Origin'] = '*'

अगर यह एक अजाक्स कॉल है तो आप किस नियंत्रक को डालेंगे? क्या मैं अधिक कोड संदर्भ देख सकता हूं?
रिग्मोनमोर

5

आप इसे हेडर सहित broswer बनाकर सर्वर को संशोधित किए बिना काम कर सकते हैं Access-Control-Allow-Origin: * HTTP विकल्प की प्रतिक्रियाओं में ।

क्रोम में, इस एक्सटेंशन का उपयोग करें । यदि आप मोज़िला पर हैं तो इस उत्तर की जाँच करें


5

यदि आपको यह Angular.js में मिलता है, तो सुनिश्चित करें कि आप इस तरह से अपने पोर्ट नंबर से बच जाएं:

var Project = $resource(
    'http://localhost\\:5648/api/...', {'a':'b'}, {
        update: { method: 'PUT' }
    }
);

इसके बारे में अधिक जानकारी के लिए यहां देखें ।


4

हमें क्रोम में परीक्षण किए गए फोनगैप एप्लिकेशन के साथ भी यही समस्या है। एक विंडोज़ मशीन जिसे हम ओपनिंग क्रोम से पहले रोज़ बैच फ़ाइल के नीचे इस्तेमाल करते हैं। इसे चलाने से पहले याद रखें कि आपको कार्य प्रबंधक से क्रोम के सभी उदाहरणों को साफ करने की आवश्यकता है या आप पृष्ठभूमि में नहीं चलने के लिए क्रोम का चयन कर सकते हैं।

बैच: (cmd का उपयोग करें)

cd D:\Program Files (x86)\Google\Chrome\Application\chrome.exe --disable-web-security


0

जब आप अनुरोध प्राप्त कर सकते हैं

var origin = (req.headers.origin || "*");

जब आपको प्रतिक्रिया करनी हो तो कुछ इस तरह से करें:

res.writeHead(
    206,
    {
        'Access-Control-Allow-Credentials': true,
        'Access-Control-Allow-Origin': origin,
    }
);
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.