"अनुरोध हेडर फ़ील्ड एक्सेस-कंट्रोल-अनुमति-हेडर को एक्सेस-कंट्रोल-अनुमति-हेडर द्वारा अनुमति नहीं है" त्रुटि को हल करना

में प्रारंभिक त्रुटि को सुधारने का प्रयास करते हुए, विभिन्न तरीकों और हेडर की अनुमति देने के लिए अनुरोध में हेडर जोड़े गए। हालाँकि, इससे एक नई त्रुटि उत्पन्न हुई: "अनुरोध हेडर फ़ील्ड एक्सेस-कंट्रोल-अनुमति-उत्पत्ति को एक्सेस-कंट्रोल-अनुमति-हेडर द्वारा अनुमति नहीं है।"

CORS और प्रीफ़्लाइट अनुरोधों को समझना

समस्या इस तथ्य से उत्पन्न होती है कि ब्राउज़र कुछ सामग्री प्रकारों के साथ क्रॉस-ओरिजिन अनुरोधों के लिए प्रीफ़्लाइट विकल्प अनुरोध भेजते हैं। डिफ़ॉल्ट रूप से, Angular एक एप्लिकेशन/json सामग्री प्रकार के साथ डेटा भेजता है, जो इस प्रीफ़्लाइट अनुरोध को ट्रिगर करता है।

सर्वर रिस्पांस और हेडर

सर्वर को स्पष्ट रूप से एक्सेस की अनुमति देनी होगी- त्रुटि को रोकने के लिए इसकी प्रतिक्रिया में कंट्रोल-अनुमति-हेडर हेडर। अन्यथा, ब्राउज़र किसी भी हेडर की अनुमति नहीं देने के रूप में प्रतिक्रिया की व्याख्या करेगा।

समाधान: सामग्री प्रकार या सर्वर प्रतिक्रिया को संशोधित करना

समस्या को हल करने के लिए, क्लाइंट को संशोधित करें या सर्वर कॉन्फ़िगरेशन:

1. क्लाइंट-साइड (कोणीय):

डिफ़ॉल्ट कोणीय सामग्री प्रकार को एप्लिकेशन/x-www-form-urlencoded पर अधिलेखित करें, जो प्रीफ़्लाइट अनुरोध को ट्रिगर नहीं करता है:

$http.post(url, data, {
    headers : {
        'Content-Type' : 'application/x-www-form-urlencoded; charset=UTF-8'
    }
});

2. सर्वर-साइड:

वैकल्पिक रूप से, सर्वर पर एक्सेस-कंट्रोल-अनुमति-हेडर हेडर की अनुमति दें। निम्नलिखित प्रतिक्रिया शीर्षलेख सेट होने चाहिए:

• पहुँच-नियंत्रण-अनुमति-उत्पत्ति: * या विशिष्ट मूल (उदाहरण के लिए, https://example.com)
• पहुँच-नियंत्रण -अनुमति-तरीके: प्राप्त करें, पोस्ट करें, डालें, हटाएं, विकल्प
• एक्सेस-कंट्रोल-अनुमति-हेडर: सभी हेडर जो क्लाइंट अनुरोध में भेजता है (उदाहरण के लिए, सामग्री-प्रकार, प्राधिकरण)