CORS: क्रेडेंशियल ध्वज सत्य होने पर Access-Control-Allow-Origin में वाइल्डकार्ड का उपयोग नहीं कर सकता

Question

मैं एक सेटअप शामिल है

फ्रंटेंड सर्वर (Node.js, डोमेन: लोकलहोस्ट: 3000) <---> बैकेंड (Django, अजाक्स, डोमेन: लोकलहोस्ट: 8000)

ब्राउज़र <- webapp <- Node.js (ऐप परोसें)

ब्राउज़र (वेबएप्प) -> अजाक्स -> डीजेंगो (ajax POST अनुरोध परोसें)

अब, मेरी समस्या यहाँ CORS सेटअप के साथ है जिसे वेबएप बैकएंड सर्वर पर अजाक्स कॉल करने के लिए उपयोग करता है। क्रोम में, मुझे मिलता रहता है

क्रेडेंशियल ध्वज सत्य होने पर Access-Control-Allow-Origin में वाइल्डकार्ड का उपयोग नहीं कर सकता।

फ़ायरफ़ॉक्स पर भी काम नहीं करता है।

मेरा Node.js सेटअप है:

var allowCrossDomain = function(req, res, next) {
    res.header('Access-Control-Allow-Origin', 'http://localhost:8000/');
    res.header('Access-Control-Allow-Credentials', true);
    res.header('Access-Control-Allow-Methods', 'GET,PUT,POST,DELETE');
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
};

और Django में मैं इसके साथ इस मिडलवेयर का उपयोग कर रहा हूं

Webapp अनुरोध करता है जैसे:

$.ajax({
    type: "POST",
    url: 'http://localhost:8000/blah',
    data: {},
    xhrFields: {
        withCredentials: true
    },
    crossDomain: true,
    dataType: 'json',
    success: successHandler
});

इसलिए, अनुरोध हेडर जो वेबप भेजता है वह दिखता है:

Access-Control-Allow-Credentials: true
Access-Control-Allow-Headers: "Origin, X-Requested-With, Content-Type, Accept"
Access-Control-Allow-Methods: 'GET,PUT,POST,DELETE'
Content-Type: application/json 
Accept: */*
Accept-Encoding: gzip,deflate,sdch
Accept-Language: en-US,en;q=0.8
Cookie: csrftoken=***; sessionid="***"

और यहाँ प्रतिक्रिया हैडर है:

Access-Control-Allow-Headers: Content-Type,*
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: POST,GET,OPTIONS,PUT,DELETE
Content-Type: application/json

मुझसे कहां गलती हो रही है?!

संपादित करें 1: मैं उपयोग कर रहा हूं chrome --disable-web-security, लेकिन अब चीजों को वास्तव में काम करना चाहता हूं।

2 संपादित करें: उत्तर:

तो, मेरे लिए समाधान django-cors-headersकॉन्फ़िगर:

CORS_ORIGIN_ALLOW_ALL = False
CORS_ALLOW_CREDENTIALS = True
CORS_ORIGIN_WHITELIST = (
    'http://localhost:3000' # Here was the problem indeed and it has to be http://localhost:3000, not http://localhost:3000/
)

Comments

मेरे लिए यह लोकलहोस्ट है: बिना http के 3000, इस तरह: CORS_ORIGIN_WHITELIST = ('लोकलहोस्ट: 3000',)

— आंद्रेई

क्या आपका मतलब है कि आप एक पीसी में फ्रंटएंड और बैकएंड विकसित करने का उपयोग करते हैं?

— फन्हुएलुओज़िन 154873

कैसे विभिन्न पीसी में सामने और बैकएंड के बारे में?

— fanhualuojin154873

@ixaxaar आपके लिए http वर्क के साथ क्यों कहता है? हम सभी केवल `'लोकलहोस्ट: 3000'` काम करते हैं।

— 244boy

@ 244boy हाँ बिंदु नहीं है http, यह /अंत में है। मुझे लगता है कि http छूटना काम कर सकता है, लेकिन मैंने वास्तव में कुछ वर्षों तक इस सामान पर काम नहीं किया है, इसलिए वास्तव में नहीं पता कि अब क्या काम करता है!

— ixaxaar

Answer 1

यह सुरक्षा का एक हिस्सा है, आप ऐसा नहीं कर सकते। यदि आप क्रेडेंशियल की अनुमति देना चाहते हैं तो आपका Access-Control-Allow-Originउपयोग नहीं करना चाहिए *। आपको सटीक प्रोटोकॉल + डोमेन + पोर्ट निर्दिष्ट करना होगा। संदर्भ के लिए ये प्रश्न देखें:

1. प्रवेश-नियंत्रण-अनुमति-मूल वाइल्डकार्ड उप-डोमेन, पोर्ट और प्रोटोकॉल
2. क्रॉस ओरिजिनल रिसोर्स शेयरिंग विथ क्रेडेंशियल्स

इसके अलावा *बहुत अधिक अनुमति है और क्रेडेंशियल्स के उपयोग को पराजित करेगा। तो सेट करें http://localhost:3000या http://localhost:8000मूल हेडर की अनुमति दें।

Comments

लेकिन क्या होगा अगर एक से अधिक डोमेन हों?

— एरोथ

@aroth आप डोमेन की एक सूची दे सकते हैं। संबंधित प्रश्न: stackoverflow.com/questions/1653308/…

— user568109

@ user568109 क्या आप बता सकते हैं "इसके अलावा *बहुत अनुमति है और क्रेडेंशियल्स के उपयोग को पराजित करेगा।"

— ह्यूगो वुड

मोबाइल डिवाइस से अनुरोध आने पर "सटीक डोमेन" क्या होता है, जैसे कॉर्डोवा के साथ हो सकता है?

— क्रिश्चियन

@Christian थोड़े पुराने, लेकिन अगर किसी को अभी भी उत्सुक हैं, तो यह समस्या केवल ब्राउज़र पर चलने वाले अनुप्रयोगों के लिए होती है, क्योंकि यह त्रुटि ब्राउज़र द्वारा सुरक्षा कारणों से फेंक दी जाती है। अन्य क्लाइंट्स जैसे मोबाइल ऐप, पोस्टमैन या किसी अन्य बैकएंड कोड का उपयोग करने के लिए http क्लाइंट का उपयोग करने से यह समस्या नहीं होगी, इसलिए आपको मूल और सटीक डोमेन के बारे में चिंता करने की ज़रूरत नहीं है ।

— एलिसन

Answer 2

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

var cors = require('cors');    
app.use(cors({credentials: true, origin: 'http://localhost:3000'}));

Answer 3

यदि आप उपयोग कर रहे हैं तो आप अपने मिडलवेयर को लिखने के बजाय कॉर्स की अनुमति देने के expressलिए कॉर्स पैकेज का उपयोग कर सकते हैं ;

var express = require('express')
, cors = require('cors')
, app = express();

app.use(cors());

app.get(function(req,res){ 
  res.send('hello');
});

Comments

आह, अब यह अधिक सुविधाजनक है, हालांकि, परिणाम एक ही है :( BTW, मैं उपयोग कर रहा हूँapp.use(cors({credentials: true}));

— ixaxaar

आप इस Django CORS मिडलवेयर पर गौर करना चाहते हैं, जिसका परीक्षण किया गया है।

— बुलकैन

तो तुम दो Django बिचौलियों है? मैं केवल django-cors-headerऐप का उपयोग करूंगा । सुनिश्चित करें कि आप लोकलहोस्ट को CORS_ORIGIN_WHITELISTसेटिंग में जोड़ें और CORS_ALLOW_CREDENTIALSTrue

— 21

हाँ यार, कोशिश की कि पहले कोई फायदा नहीं हुआ CORS_ORIGIN_ALLOW_ALL = True, CORS_ORIGIN_WHITELIST = ( 'localhost' )और CORS_ALLOW_CREDENTIALS = True मुझे ये हेडर मिले:Access-Control-Allow-Credentials: true Access-Control-Allow-Origin: http://localhost:3000/ Access-Control-Allow-Methods: POST,GET,OPTIONS,PUT,DELETE Content-Type: application/json

— ixaxaar

इस प्रलेखन को पढ़ने के बाद: github.com/expressjs/corsuse i इस कॉन्फिगर का उपयोग करके: app.use (cors ({क्रेडेंशियल्स: ट्रू, ओरिजिनल: ' लोकलहोस्ट: 3001 '})); मेरे लिए काम कर रहा है।

— allel

Answer 4

कोशिश करो:

const cors = require('cors')

const corsOptions = {
    origin: 'http://localhost:4200',
    credentials: true,

}
app.use(cors(corsOptions));

Answer 5

यदि आप सभी उत्पत्ति की अनुमति देना चाहते हैं और साख को सही रखना चाहते हैं, तो यह मेरे लिए काम कर रहा है:

app.use(cors({
  origin: function(origin, callback){
    return callback(null, true);
  },
  optionsSuccessStatus: 200,
  credentials: true
}));

Comments

@TSlegaitis Haha हाँ, यही कारण है कि यह सभी मूल के लिए काम करता है, लेकिन साख रखता है। मैं इसे सुरक्षा के लिए अनुशंसित नहीं करूंगा लेकिन यह काम नहीं करता है।

— Squirrl

Answer 6

(संपादित करें) पहले से शामिल ऐड-ऑन अब उपलब्ध नहीं है, आप इस दूसरे को आज़मा सकते हैं

---

Chrome में विकास के उद्देश्यों के लिए, इस ऐड को स्थापित करने से उस विशिष्ट त्रुटि से छुटकारा मिल जाएगा:

Access to XMLHttpRequest at 'http://192.168.1.42:8080/sockjs-node/info?t=1546163388687' 
from origin 'http://localhost:8080' has been blocked by CORS policy: The value of the 
'Access-Control-Allow-Origin' header in the response must not be the wildcard '*' 
when the request's credentials mode is 'include'. The credentials mode of requests 
initiated by the XMLHttpRequest is controlled by the withCredentials attribute.

स्थापित करने के बाद, सुनिश्चित करें कि आप Intercepted URLsAddOn's ( CORS , हरे या लाल) आइकन पर क्लिक करके और उपयुक्त टेक्स्टबॉक्स को भरकर अपना url पैटर्न जोड़ सकते हैं । यहाँ जोड़ने के लिए एक उदाहरण URL पैटर्न जो http://localhost:8080निम्न के साथ काम करेगा:*://*

Comments

मैं इसे स्थापित करने के बाद ही मिला, कोई विचार?

— जलील

इसने मेरे लिए काम किया। चेतावनी यदि आपके पास अन्य समान ऐड-ऑन हैं, तो आपको इसे आज़माने से पहले इसे अनइंस्टॉल करना होगा।

— फिलिप्पो जीजी

कृपया टूटे हुए लिंक को ठीक करें

— Luk Aron

लगता है कि मूल ऐड को हटा दिया गया था, मैंने शीर्ष पर एक नई सिफारिश (एडिट) के रूप में

— जोड़ दी

Answer 7

यह मेरे लिए विकास का काम करता है लेकिन मैं सलाह नहीं दे सकता कि उत्पादन में, यह काम करने का सिर्फ एक अलग तरीका है जिसका उल्लेख अभी तक नहीं किया गया है लेकिन शायद सबसे अच्छा नहीं है। वैसे भी यहाँ जाता है:

आप अनुरोध से मूल प्राप्त कर सकते हैं, फिर प्रतिक्रिया हेडर में इसका उपयोग कर सकते हैं। यहां बताया गया है कि यह एक्सप्रेस में कैसा दिखता है:

app.use(function(req, res, next) {
  res.header('Access-Control-Allow-Origin', req.header('origin') );
  next();
});

मुझे नहीं पता कि आपके अजगर सेटअप के साथ क्या दिखेगा लेकिन इसका अनुवाद करना आसान होना चाहिए।

Comments

मोज़िला देव डॉक्स अनुरोध के आधार पर अनुमत मूल को बदलने के विचार पर विस्तार करते हैं। यह सुझाव दिया गया है कि एक 'वैरी: ओरिजिन' HTTP प्रतिक्रिया हेडर और वाइटेलिस्ट अनुमति डोमेन को जोड़ने के लिए।

— रमज़िस