HTML5 fetch API का उपयोग करके Access-Control-Allow-Origin हेडर की अनुमति दें

Question 1

मैं HTML5 fetch API का उपयोग कर रहा हूं।

var request = new Request('https://davidwalsh.name/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

मैं सामान्य जसन का उपयोग करने में सक्षम हूं लेकिन उपरोक्त एपि यूआरएल के डेटा को लाने में असमर्थ हूं। यह त्रुटि फेंकता है:

Fetch API https://davidwalsh.name/demo/arsenal.json लोड नहीं कर सकता । अनुरोधित संसाधन पर कोई 'एक्सेस-कंट्रोल-अनुमति-उत्पत्ति' हेडर मौजूद नहीं है। उत्पत्ति ' http: // localhost ' इसलिए पहुँच की अनुमति नहीं है। यदि एक अपारदर्शी प्रतिक्रिया आपकी आवश्यकताओं को पूरा करती है, तो संसाधन को अक्षम करने के लिए 'नो-कॉर्स' के लिए अनुरोध के मोड को सेट करें।

Question 2

जैसे epascarello ने कहा, संसाधन को होस्ट करने वाले सर्वर को CORS सक्षम होना चाहिए। आप क्लाइंट की तरफ क्या कर सकते हैं (और शायद आप क्या सोच रहे हैं) को CORS में लाने का तरीका सेट किया गया है (हालाँकि यह डिफ़ॉल्ट सेटिंग है जो मुझे विश्वास है):

fetch(request, {mode: 'cors'});

हालाँकि इसके लिए सर्वर को अभी भी कॉर्स को सक्षम करने की आवश्यकता है, और अपने डोमेन को संसाधन का अनुरोध करने की अनुमति दें।

की जाँच करें CORS प्रलेखन , और इस भयानक Udacity वीडियो समझा ही उत्पत्ति नीति ।

आप ग्राहक पक्ष पर नो-कॉर्स मोड का भी उपयोग कर सकते हैं, लेकिन यह आपको केवल एक अपारदर्शी प्रतिक्रिया देगा (आप शरीर को नहीं पढ़ सकते हैं, लेकिन प्रतिक्रिया अभी भी एक सेवा कार्यकर्ता द्वारा कैश की जा सकती है या कुछ एपीआई द्वारा खपत की जा सकती है, जैसे <img>) :

fetch(request, {mode: 'no-cors'})
.then(function(response) {
  console.log(response); 
}).catch(function(error) {  
  console.log('Request failed', error)  
});

Question 3

मेरे पास http: // localhost: 3000 में मेरा फ्रंट-एंड कोड चल रहा था और http: //hosthost पर मेरा एपीआई (बैकएंड कोड) चल रहा था : 5000

API को कॉल करने के लिए fetch API का उपयोग कर रहा था। प्रारंभ में, यह "cors" त्रुटि फेंक रहा था। फिर इस बैक कोड को मेरे बैकएंड एपीआई कोड में जोड़ा, जिससे कहीं से भी मूल और हेडर की अनुमति मिल सके।

let allowCrossDomain = function(req, res, next) {
  res.header('Access-Control-Allow-Origin', "*");
  res.header('Access-Control-Allow-Headers', "*");
  next();
}
app.use(allowCrossDomain);

हालाँकि आपको मंच, ठेस जैसे अन्य वातावरण के मामले में मूल उत्पत्ति को प्रतिबंधित करना चाहिए।

Question 4

यह मेरे लिए काम किया:

npm install -g local-cors-proxy

एपीआई एंडपॉइंट जो हम अनुरोध करना चाहते हैं कि कोर मुद्दे हैं:

https://www.yourdomain.com/test/list

प्रारंभ प्रॉक्सी:

lcp --proxyUrl https://www.yourdomain.com

 Proxy Active 

 Proxy Url: http://www.yourdomain.com:28080
 Proxy Partial: proxy
 PORT: 8010

फिर आपके ग्राहक कोड में, नया API समापन बिंदु:

http://localhost:8010/proxy/test/list

अंतिम परिणाम https://www.yourdomain.ie/test/list के लिए CORS मुद्दों के बिना एक अनुरोध होगा !

Question 5

मुझे पता है कि यह एक पुरानी पोस्ट है, लेकिन मैंने पाया कि इस त्रुटि को ठीक करने के लिए मैंने जो काम किया है वह मेरे सर्वर के आईपी पते का उपयोग करने के बजाय मेरे डोमेन अनुरोध के भीतर डोमेन नाम का उपयोग कर रहा है। उदाहरण के लिए:

#(original) var request = new Request('https://davidwalsh.name/demo/arsenal.json');
#use IP instead
var request = new Request('https://0.0.0.0/demo/arsenal.json');

fetch(request).then(function(response) {
    // Convert to JSON
    return response.json();
}).then(function(j) {
    // Yay, `j` is a JavaScript object
    console.log(JSON.stringify(j));
}).catch(function(error) {
    console.log('Request failed', error)
});

Question 6

यदि आप उपयोग कर रहे हैं nginx यह कोशिश करो

#Control-Allow-Origin access

    # Authorization headers aren't passed in CORS preflight (OPTIONS) calls. Always return a 200 for options.
    add_header Access-Control-Allow-Credentials "true" always;
    add_header Access-Control-Allow-Origin "https://URL-WHERE-ORIGIN-FROM-HERE " always;
    add_header Access-Control-Allow-Methods "GET,OPTIONS" always;
    add_header Access-Control-Allow-Headers "x-csrf-token,authorization,content-type,accept,origin,x-requested-with,access-control-allow-origin" always;

    if ($request_method = OPTIONS ) {
        return 200;
    }

Question 7

Https://expressjs.com/en/resources/middleware/cors.html को देखें। आपको कॉर्स का उपयोग करना होगा।

इंस्टॉल:

$ npm install cors

const cors = require('cors');
app.use(cors());

आपको इस कोड को अपने नोड सर्वर में डालना होगा।