अनुरोधित संसाधन त्रुटि पर कोई 'एक्सेस-कंट्रोल-अनुमति-उत्पत्ति' हेडर मौजूद नहीं है

Question 1

मैं एक समाचार वेबसाइट का फ़ीड लाने की कोशिश कर रहा हूं। सोचा था कि मैं फीडबर्नर फ़ीड को जोंस में बदलने के लिए Google के फ़ीड एपीआई का उपयोग करूंगा। निम्नलिखित यूआरएल फ़ीड से 10 पोस्ट लौटाएगा, json प्रारूप में। http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi

उपरोक्त यूआरएल की सामग्री प्राप्त करने के लिए मैंने निम्नलिखित कोड का उपयोग किया

$.ajax({
  type: "GET",
  dataType: "jsonp",
  url: "http://ajax.googleapis.com/ajax/services/feed/load",
  data: {
    "v": "1.0",
    "num": "10",
    "q": "http://feeds.feedburner.com/mathrubhumi"
  },
  success: function(result) {
    //.....
  }
});

लेकिन यह काम नहीं कर रहा है और मुझे निम्नलिखित त्रुटि मिल रही है

XMLHttpRequest http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http%3A%2F%2Ffeeds.feedferer.com%2Fmathrubhumi लोड नहीं किया जा सकता । अनुरोधित संसाधन पर कोई 'एक्सेस-कंट्रोल-अनुमति-उत्पत्ति' हेडर मौजूद नहीं है। उत्पत्ति ' http: // localhost ' इसलिए पहुँच की अनुमति नहीं है।

मैं यह कैसे तय करुं?

Question 2

मेरा मानना है कि यह संभावना हो सकती है कि क्रोम - क्रोम मुद्दे को देखने केlocalhost माध्यम से जाने के लिए समर्थन न करेAccess-Control-Allow-Origin

Access-Control-Allow-Originहैडर में क्रोम भेजने के लिए, बस अपने लोकलहोस्ट को अपने / आदि / होस्ट्स फ़ाइल में किसी अन्य डोमेन पर उर्फ करें, जैसे:

127.0.0.1   localhost yourdomain.com

फिर अगर आप yourdomain.comइसके बजाय अपनी स्क्रिप्ट का उपयोग करेंगे localhost, तो कॉल सफल होनी चाहिए।

Question 3

यदि आप Google Chrome ब्राउज़र का उपयोग करते हैं तो आप एक्सटेंशन के साथ हैक कर सकते हैं।

आप एक क्रोम एक्सटेंशन पा सकते हैं जो आपके आवेदन में मक्खी पर कोर्स हेडर को संशोधित करेगा। जाहिर है, यह केवल क्रोम है, लेकिन मुझे यह पसंद है कि यह कहीं भी शून्य परिवर्तन के साथ काम करता है।

आप अपने ऐप को एक स्थानीय मशीन (यदि उत्पादन में सब कुछ काम करता है) पर डिबगिंग के लिए इसका उपयोग कर सकते हैं।

सूचना : यदि URL टूट जाता है तो एक्सटेंशन नाम Access-Control-Allow-Origin: * हो जाता है । जब आप अपने सामान पर काम नहीं कर रहे हैं, तो मैं आपको इस एक्सटेंशन को अक्षम करने की सलाह देता हूं, क्योंकि, उदाहरण के लिए, इस एक्सटेंशन के साथ youtube काम नहीं करता है।

Question 4

इसे आज़माएं - हेडर को इस प्रकार सेट करके अजाक्स कॉल सेट करें:

var uri = "http://localhost:50869/odata/mydatafeeds"
$.ajax({
    url: uri,
    beforeSend: function (request) {
        request.setRequestHeader("Authorization", "Negotiate");
    },
    async: true,
    success: function (data) {
        alert(JSON.stringify(data));
    },
    error: function (xhr, textStatus, errorMessage) {
        alert(errorMessage);
    }                
});

फिर निम्न कमांड लाइन के साथ क्रोम खोलकर अपना कोड चलाएं:

chrome.exe --user-data-dir="C:/Chrome dev session" --disable-web-security

Question 5

सिर्फ FYI करें, मैंने इस जानकारी को jQuery प्रलेखन से देखा है जो मेरा मानना है कि इस मुद्दे पर लागू होता है:

ब्राउज़र सुरक्षा प्रतिबंधों के कारण, अधिकांश "अजाक्स" अनुरोध एक ही मूल नीति के अधीन हैं ; अनुरोध किसी भिन्न डोमेन, उपडोमेन, पोर्ट या प्रोटोकॉल के डेटा को सफलतापूर्वक पुनर्प्राप्त नहीं कर सकता है।

@Thanix जैसी मेजबानों फ़ाइल को बदलने से मेरे लिए काम नहीं किया गया, लेकिन @dkruchok द्वारा बताए गए विस्तार ने समस्या को हल कर दिया।

Question 6

Chrome आपको दो अलग-अलग लोकलहोस्ट को एकीकृत करने की अनुमति नहीं देता है, इसीलिए हमें यह त्रुटि मिल रही है। आपको बस Microsoft Visual Studio Web Api Core पैकेज को nuget manager से शामिल करना है। और अपनी WebApiConfig.cs फ़ाइल में WebApi प्रोजेक्ट के कोड की दो पंक्तियाँ जोड़ें ।

var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

फिर सब हो गया।

Question 7

यदि इसकी कॉलिंग स्प्रिंग बूट सेवा है। आप इसे नीचे दिए गए कोड का उपयोग करके संभाल सकते हैं।

@Bean
public WebMvcConfigurer corsConfigurer() {
    return new WebMvcConfigurerAdapter() {
        @Override
        public void addCorsMappings(CorsRegistry registry) {
            registry.addMapping("/**")
                    .allowedOrigins("*")
                    .allowedMethods("GET", "POST", "PUT", "DELETE", "HEAD", "OPTIONS")
                    .allowedHeaders("*", "Access-Control-Allow-Headers", "origin", "Content-type", "accept", "x-requested-with", "x-requested-by") //What is this for?
                    .allowCredentials(true);
        }
    };
}

Question 8

विकास के लिए आप https://cors-anywhere.herokuapp.com का उपयोग कर सकते हैं , उत्पादन के लिए अपना प्रॉक्सी सेट करना बेहतर है

async function read() {
   let r= await (await fetch('https://cors-anywhere.herokuapp.com/http://ajax.googleapis.com/ajax/services/feed/load?v=1.0&num=10&q=http://feeds.feedburner.com/mathrubhumi')).json();
   console.log(r);
}

read();

स्निपेट का विस्तार करें

Question 9

CORS अनब्लॉक कार्यों के लिए क्रोम 78 [UNB CORS] महान [1] https://chrome.google.com/webstore/detail/cors-unblock/lfhmikememgdcahcdlaciloancbhjino

यह "क्रोम अनब्लॉक" नामक Google क्रोम के लिए एक प्लगइन है

सारांश: 'एक्सेस-कंट्रोल-अलाउंस-ओरिजिन: *' शीर्षक द्वारा स्थानीय और दूरस्थ वेब अनुरोधों को सक्षम करते समय कोई और कोर त्रुटि

यह एक्सटेंशन कस्टम "एक्सेस-कंट्रोल-अलाउंस-ओरिजिन-ओरिजिनल" और "एक्सेस-कंट्रोल-कंट्रोल-अलाउंस-मेथड्स" हेडर को हर रिक्वेस्ट जो ब्राउजर को प्राप्त होता है, प्रदान करके नियंत्रण प्रदान करता है। एक उपयोगकर्ता टूलबार बटन से एक्सटेंशन को चालू और बंद कर सकता है। इन हेडर को कैसे बदला जाता है, इसे संशोधित करने के लिए, राइट-क्लिक करें संदर्भ मेनू आइटम का उपयोग करें। आप अनुकूलित कर सकते हैं कि किस विधि की अनुमति है। डिफ़ॉल्ट विकल्प 'GET', 'PUT', 'POST', 'DELETE', 'HEAD', 'विकल्प', 'PATCH' विधियों की अनुमति है। जब सर्वर पहले से ही इन्हें भरता है तो आप एक्सटेंशन से इन हेडर को न लिखने के लिए भी कह सकते हैं।

Question 10

ठीक है, दूसरा तरीका यह है कि cors प्रॉक्सी का उपयोग करें, आपको बस अपने URL.so से पहले https://cors-anywhere.herokuapp.com/ जोड़ना होगा। आपका URL https://cors-anywhere.herokuapp.com/http जैसा होगा। : //ajax.googleapis.com/ajax/services/feed/load ।

प्रॉक्सी सर्वर उपरोक्त URL से http://ajax.googleapis.com/ajax/services/feed/load प्राप्त करता है। फिर यह उस सर्वर की प्रतिक्रिया प्राप्त करने के लिए अनुरोध करता है। और अंत में, प्रॉक्सी लागू होता है

Access-Control-Allow-Origin: *

उस मूल प्रतिक्रिया के लिए।

यह समाधान महान है क्योंकि यह विकास और उत्पादन दोनों में काम करता है। सारांश में, आप इस तथ्य का लाभ उठा रहे हैं कि समान-मूल नीति केवल ब्राउज़र-टू-सर्वर संचार में लागू की जाती है। जिसका अर्थ है कि इसे सर्वर-से-सर्वर संचार में लागू नहीं किया जाना चाहिए!

आप कॉर्स त्रुटि को ठीक करने के लिए मध्यम 3 तरीकों पर समाधान के बारे में अधिक पढ़ सकते हैं

Question 11

का उपयोग करें @CrossOriginपर backendsideस्प्रिंग बूट नियंत्रक (या तो श्रेणी स्तर या विधि स्तर) क्रोम त्रुटि के लिए समाधान के रूप में में 'No 'Access-Control-Allow-Origin'हैडर अनुरोध किया गया संसाधन पर मौजूद है। '

यह समाधान मेरे लिए 100% काम कर रहा है ...

उदाहरण: कक्षा स्तर

@CrossOrigin
@Controller
public class UploadController {

----- या -------

उदाहरण: विधि का स्तर

@CrossOrigin(origins = "http://localhost:3000", maxAge = 3600)
@RequestMapping(value = "/loadAllCars")
    @ResponseBody
    public List<Car> loadAllCars() {


Ref: https://spring.io/blog/2015/06/08/cors-support-in-spring-framework