प्रीफलाइट अनुरोध का जवाब एक्सेस नियंत्रण पास नहीं करता है लैरावेल और अजाक्स कॉल

Question

मेरे पास एक दूरस्थ सर्वर में होस्ट किए गए लैरवेल 5.1 में एक आरईएसटी एपीआई है। अब, मैं उस एपीआई को किसी अन्य वेबसाइट से उपभोग करने की कोशिश कर रहा हूं (जो कि मेरे पास स्थानीय है)।

लार्वेल में मैंने सीओआरएस हेडर भेजने के लिए आवश्यक लाइनें सेट की हैं। मैंने पोस्टमैन का उपयोग करके एपीआई का भी परीक्षण किया और सबकुछ ठीक लगता है!

var url="http://xxx.xxx.xxx.xxx/apiLocation"; 
var data=$("#my-form").serialize(); 
    $.ajax({ 
        type: "POST", 
        url: url, 
        data: data, 
        headers: { 'token': 'someAPItoken that I need to send'}, 
        success: function(data) { 
         console.log(data); 
        }, 
        dataType: "json", 
       }); 

खरीदें तो मैं कंसोल में इस त्रुटि मिलती है:

दृश्यपटल में

फिर, वेबसाइट में मैं ajax का उपयोग कर पोस्ट अनुरोध, इस कोड के साथ भेजा

XMLHttpRequest http://xxx.xxx.xxx.xxx/apiLocation लोड नहीं कर सकता है। प्रीफलाइट अनुरोध का जवाब एक्सेस नियंत्रण चेक पास नहीं करता है: 'एक्सेस-कंट्रोल-अनुमति-उत्पत्ति' हेडर अनुरोधित संसाधन पर मौजूद है। उत्पत्ति 'http://localhost' इसलिए पहुंच की अनुमति नहीं है।

बैकएंड

एपीआई मैं इस सेट में (हेडर स्थापित करने के लिए एक Laravel मिडिलवेयर का उपयोग) में:

return $next($request) 
      ->header('Access-Control-Allow-Origin', '*') 
      ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS'); 

तो, मैं लेकर संदेह में हूँ जहां वास्तव में है मुसीबत।

1. सर्वर में? लेकिन फिर पोस्टमैन के साथ ठीक क्यों काम करते हैं?
2. अजाक्स कॉल में है? तो, मुझे क्या जोड़ना चाहिए?

Answer 1

आपका बैकएंड कोड है कि बस के लिए कॉन्फ़िगर हेडर के साथ एक 200 प्रतिक्रिया भेजता है OPTIONS अनुरोधों के लिए कुछ स्पष्ट हैंडलिंग शामिल होना चाहिए; उदाहरण के लिए:

if ($request->getMethod() == "OPTIONS") { 
    return Response::make('OK', 200, $headers); 
} 

सर्वर-साइड कोड भी एक Access-Control-Allow-Headers प्रतिक्रिया हेडर token अनुरोध का नाम शामिल है कि भेजना चाहिए हेडर अपने दृश्यपटल कोड भेज रहा है:

-> header('Access-Control-Allow-Headers', 'token') 

लेकिन फिर क्यों साथ पोस्टमैन ठीक काम करते हैं?

क्योंकि पोस्टमैन एक वेब ऐप नहीं है और क्रॉस-मूल अनुरोध करने से प्रतिबंधित करने के लिए वेब ऐप्स पर समान मूल नीति प्रतिबंध ब्राउज़र द्वारा बाध्य नहीं है। पोस्टमैन परीक्षण अनुरोधों की सुविधा के लिए ब्राउज़र बोल्ट-ऑन है, उसी तरह वे ब्राउज़र के बाहर curl या कमांड लाइन से जो कुछ भी कर सकते हैं। पोस्टमैन स्वतंत्र रूप से क्रॉस-मूल अनुरोध कर सकता है।

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS इसके विपरीत यह बताता है कि ब्राउज़रों ने वेब ऐप्स को क्रॉस-मूल अनुरोध करने से कैसे अवरुद्ध किया है, लेकिन यह भी कि आप सही सीओआरएस हेडर भेजने के लिए अपने बैकएंड को कॉन्फ़िगर करके ब्राउज़र को अनलॉक कैसे कर सकते हैं।

https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests बताता है कि ब्राउज़र OPTIONS क्यों भेज रहा है कि आपके बैकएंड को संभालने की आवश्यकता है।