जब http: // localhost मूल है तो घातक कॉर्स

186

मैं इस कोर समस्या के साथ फंस गया हूं, भले ही मैं उचित हेडर के साथ सर्वर (nginx / node.js) सेट करता हूं।

मैं Chrome नेटवर्क फलक में देख सकता हूं -> प्रतिक्रिया शीर्षलेख:

Access-Control-Allow-Origin:http://localhost

जो चाल करना चाहिए।

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

var xhr = new XMLHttpRequest();
xhr.onload = function() {
   console.log('xhr loaded');
};
xhr.open('GET', 'http://stackoverflow.com/');
xhr.send();

मुझे मिला

XMLHttpRequest http://stackoverflow.com/ लोड नहीं कर सकता । उत्पत्ति http: // लोकलहोस्ट को एक्सेस-कंट्रोल-अनुमति-उत्पत्ति द्वारा अनुमति नहीं है।

मुझे संदेह है कि यह क्लाइंट स्क्रिप्ट में समस्या है और सर्वर कॉन्फ़िगरेशन नहीं ...

— whadar
स्रोत

44

नहीं, stackoverflow.com आपको यह हेडर सेट करने की आवश्यकता है, न कि आपको। :एक्स। एक ही मूल नीति का अन्यथा क्या होगा।

— एसेलिजा

3

आपके द्वारा सेट किए गए सर्वर तक पहुंचने की कोशिश करें, ओवरफ्लो न करें। ;)

— नेक

DOH! क्या क्रोम (या अन्य ब्राउज़र) को बताने का एक तरीका है, संसाधन प्राप्त करने के लिए भले ही हेडर गायब हो जब मेरा मूल स्थानीयहोस्ट हो?

— वंडर

Chrome में अपने कोड चलाएं (20.0.1132.57, विंडोज 7), ठीक काम करता है।

— imwilsonxu

1

यदि आप किसी पोर्ट के साथ लोकलहोस्ट का उपयोग कर रहे हैं तो यह उत्तर मेरे लिए सर्वरफॉल्ट . com/a/673551/238261 पर काम करता है ।

— नेल्लू

230

Chrome , CORS अनुरोधों के लिए लोकलहोस्ट का समर्थन नहीं करता है (2010 में खोला गया एक बग, 2014 में WontFix चिह्नित)।

इसके चारों ओर जाने के लिए आप एक डोमेन का उपयोग कर सकते हैं lvh.me(जो कि लोकलहोस्ट की तरह 127.0.0.1 पर इंगित करता है) या --disable-web-securityझंडे के साथ क्रोम शुरू करें (यह मानकर कि आप बस परीक्षण कर रहे हैं)।

— बांका
स्रोत

24

@greensuisse - यह लोकलहोस्ट पर पोस्ट नहीं कर रहा है। यह लोकलहोस्ट से पोस्टिंग है जो समस्या है।

— चेसो

9

यह बग अमान्य है (और इसे इस तरह चिह्नित किया गया है - crbug.com/67743#c17 )। Esailija की टिप्पणी सही है, इन हेडर को लोकलहोस्ट में जोड़ने से जादुई रूप से आपको अन्य सभी साइटों तक पहुँच प्राप्त नहीं होगी। यह रिमोट साइट है जिसे इन हेडर के साथ परोसा जाना चाहिए।

— रोब डब्ल्यू

22

क्रोम पर यह महसूस करने के लिए कि उसे फ़ायरफ़ॉक्स में पूरी तरह से ठीक काम करता है, बस 2 घंटे का परीक्षण खर्च किया गया हैGrrrr...

— फ्लोटिंगरॉक

11

अन्य विकल्प: अपनी होस्ट फ़ाइल को संपादित करें ताकि स्थानीय [mysite] .com अंक 127.0.0.1 हो, फिर अपनी CORS फाइल को अनुमति दें *। [Mysite] .com

— tom

6

मुझे फ़ायरफ़ॉक्स के साथ एक ही समस्या का सामना करना पड़ा। मैं इसे केवल किनारे पर ही बना सकता था! हालांकि बढ़िया पोस्ट, शानदार! :)

— लुइस गॉविया

54

@ Beau के उत्तर के अनुसार, Chrome लोकलहोस्ट कोर के अनुरोधों का समर्थन नहीं करता है, और इस दिशा में कोई बदलाव होने की संभावना नहीं है।

मैं इस मुद्दे के चारों ओर जाने के लिए अनुमति-नियंत्रण-अनुमति-उत्पत्ति: * क्रोम एक्सटेंशन का उपयोग करता हूं । एक्सटेंशन कोर के लिए आवश्यक HTTP हेडर जोड़ देगा:

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: "GET, PUT, POST, DELETE, HEAD, OPTIONS"
Access-Control-Expose-Headers: <you can add values here>

स्रोत कोड Github पर प्रकाशित हुआ है ।

ध्यान दें कि एक्सटेंशन डिफ़ॉल्ट रूप से सभी URL को फ़िल्टर करता है। यह कुछ वेबसाइटों को तोड़ सकता है (उदाहरण के लिए: ड्रॉपबॉक्स)। मैंने निम्न URL फ़िल्टर के साथ केवल लोकलहोस्ट URL फ़िल्टर करने के लिए इसे बदल दिया है

*://localhost:*/*

— Hanxue
स्रोत

14

यदि आप इस मुद्दे को @beau लिंक पढ़ते हैं, तो आप देखेंगे कि Chrome 100% लोकलहोस्ट से और उसके लिए क्रॉस-मूल अनुरोधों का समर्थन करता है। इस मुद्दे को 2014 में बंद कर दिया गया था क्योंकि इसे पुन: प्रस्तुत नहीं किया जा सकता था। उस धागे में बाकी का शोर गलत गैर-मूल सर्वर वाले लोगों के साथ है (जैसा कि यहां मूल प्रश्न के साथ है)।

— मोलमोबी

1

क्रोम पर मेरे लिए आकर्षण की तरह काम किया

— आकाश सहाय

2

कार्य लिंक: chrome.google.com/webstore/detail/allow-cors-access-control/…

— paddotk

3

इस एक्सटेंशन के साथ काम नहीं करता है Access-Control-Allow-Credentials: true, क्योंकि यह सेट Access-Control-Allow-Originकरने के लिए *और दोनों होने trueऔर *ब्राउज़रों द्वारा अवरुद्ध है। यदि क्रेडेंशियल का उपयोग करना सही है, तो आपको गैर-वाइल्डकार्ड मूल का उपयोग करना चाहिए। मैं Moesif Origins और CORS परिवर्तक विस्तार की सलाह देता हूं, जो आपको वैसे हेडर बदलने की अनुमति देता है जो आप चाहते हैं।

— सैमुअल

शायद मैं कुछ गलत कर रहा हूं, लेकिन यह विस्तार अब मेरे लिए काम नहीं कर रहा है।

— जेम्स पार्कर

19

वास्तविक समस्या यह है कि यदि हम -Allow-सभी अनुरोधों ( OPTIONSऔर POST) के लिए सेट करते हैं , तो Chrome इसे रद्द कर देगा। निम्न कोड मेरे लिए POSTChrome के साथ LocalHost के साथ काम करता है

<?php
if (isset($_SERVER['HTTP_ORIGIN'])) {
    //header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}");
    header("Access-Control-Allow-Origin: *");
    header('Access-Control-Allow-Credentials: true');    
    header("Access-Control-Allow-Methods: GET, POST, OPTIONS"); 
}   
if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') {
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD']))
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS");         
    if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']))
        header("Access-Control-Allow-Headers:{$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}");

    exit(0);
} 
?>

— greensuisse
स्रोत

15

OP nginx / node.js का उपयोग कर रहा है। नहीं PHP

— code_monk

4

क्रोम localhostठीक से एक मूल से कोर के साथ अनुरोध करेगा । यह क्रोम के साथ कोई समस्या नहीं है।

आपके द्वारा लोड नहीं किए जाने का कारण यह http://stackoverflow.comहै कि Access-Control-Allow-Originहेडर आपकी localhostउत्पत्ति की अनुमति नहीं दे रहे थे ।

— चपटी कील
स्रोत

2

त्वरित और गंदा क्रोम एक्सटेंशन फिक्स:

मोइसिफ ओरिग्न एंड कॉर्स चेंजर

हालाँकि, Chrome लोकलहोस्ट से क्रॉस-ऑरिजिन अनुरोधों का समर्थन करता है। के लिए कोई ऐसा शीर्ष लेख करना सुनिश्चित करें Access-Control-Allow-Originके लिए localhost।

— kaleazy
स्रोत

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

— मैडॉक्स

1

किसी भी एक्सटेंशन ने मेरे लिए काम नहीं किया, इसलिए मैंने एक साधारण स्थानीय प्रॉक्सी स्थापित किया। मेरे मामले में https://www.npmjs.com/package/local-cors-proxy यह 2 मिनट का सेटअप है:

(उनकी साइट से)

npm install -g local-cors-proxy
एपीआई एंडपॉइंट जो हम अनुरोध करना चाहते हैं कि कोर मुद्दे हैं: https://www.yourdomain.ie/movies/list

प्रारंभ प्रॉक्सी: lcp --proxyUrl https://www.yourdomain.ie

फिर आपके क्लाइंट कोड में, नया एपीआई एंडपॉइंट: http://localhost:8010/proxy/movies/list

मेरे लिए एक आकर्षण की तरह काम किया: आपका ऐप प्रॉक्सी को कॉल करता है, जो सर्वर को कॉल करता है। शून्य कोर समस्याओं।

— डेनियल पी
स्रोत

0

मैंने हेडर को छूने और सर्वर साइड पर रीडायरेक्ट न करने का फैसला किया और यह एक आकर्षण की तरह जाग गया।

नीचे दिए गए उदाहरण कोणीय के वर्तमान संस्करण (वर्तमान में 9) और शायद वेबपैक देवसेवर का उपयोग करके किसी भी अन्य ढांचे के लिए है। लेकिन मुझे लगता है कि एक ही सिद्धांत अन्य बैकएंड पर काम करेगा।

तो मैं फ़ाइल प्रॉक्सी में निम्नलिखित विन्यास का उपयोग करता हूं ।conf.json :

{
  "/api": {
    "target": "http://localhost:3000",
    "pathRewrite": {"^/api" : ""},
   "secure": false
 }
}

कोणीय के मामले में मैं उस विन्यास के साथ काम करता हूं:

$ ng serve -o --proxy-config=proxy.conf.json

मैं सर्विंग कमांड में प्रॉक्सी का उपयोग करना पसंद करता हूं, लेकिन आप इस कॉन्फ़िगरेशन को कोणीय.जॉन की तरह भी रख सकते हैं :

"architect": {
  "serve": {
    "builder": "@angular-devkit/build-angular:dev-server",
    "options": {
      "browserTarget": "your-application-name:build",
      "proxyConfig": "src/proxy.conf.json"
    },

यह सभी देखें:

https://www.techiediaries.com/fix-cors-with-angular-cli-proxy-configuration/

https://webpack.js.org/configuration/dev-server/#devserverproxy

— जुरी सिनिटसन
स्रोत