jQuery में CORS त्रुटियों को समझना, लेकिन पोस्टमैन में नहीं

jQuery में CORS त्रुटियों को समझना, लेकिन पोस्टमैन में नहीं
Arthur Petit
गुरुवार, 4 जुलाई 2024 को 9:43:33 am
JavaScript

ब्राउज़रों में CORS त्रुटियाँ क्यों होती हैं?

RESTful API से कनेक्ट करने के लिए जावास्क्रिप्ट के साथ काम करते समय, आपको "अनुरोधित संसाधन पर कोई 'एक्सेस-कंट्रोल-अनुमति-उत्पत्ति' हेडर मौजूद नहीं है" त्रुटि का सामना करना पड़ सकता है। यह त्रुटि आमतौर पर ब्राउज़र की समान मूल नीति के कारण होती है, जो वेब पेजों को वेब पेज परोसने वाले डोमेन से भिन्न डोमेन पर अनुरोध करने से प्रतिबंधित करती है।

दिलचस्प बात यह है कि जब वही अनुरोध पोस्टमैन जैसे टूल के माध्यम से किया जाता है, तो ऐसी कोई त्रुटि नहीं होती है। यह अंतर डेवलपर्स के लिए हैरान करने वाला हो सकता है। यह समझना कि XMLHttpRequest या फ़ेच कॉल को ब्राउज़र में CORS द्वारा अवरुद्ध क्यों किया जाता है, लेकिन पोस्टमैन में नहीं, समस्या निवारण और सुरक्षित वेब अनुप्रयोगों को विकसित करने के लिए महत्वपूर्ण है।

फ्लास्क बैकएंड के साथ जावास्क्रिप्ट में सीओआरएस मुद्दों को हल करना

jQuery का उपयोग करके जावास्क्रिप्ट फ्रंटएंड कोड

// JavaScript (jQuery) frontend script
$(document).ready(function() {
  $("#loginButton").click(function() {
    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: 'http://localhost:5000/login',
      data: JSON.stringify({
        username: 'user',
        password: 'pass'
      }),
      contentType: 'application/json',
      crossDomain: true,
      xhrFields: {
        withCredentials: true
      }
    }).done(function(data) {
      console.log('Login successful');
    }).fail(function(xhr, textStatus, errorThrown) {
      alert('Error: ' + xhr.responseText);
    });
  });
});

फ्लास्क में सीओआरएस की स्थापना

फ्लास्क का उपयोग करते हुए पायथन बैकएंड कोड

# Python (Flask) backend script
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data.get('username')
    password = data.get('password')

    if username == 'user' and password == 'pass':
        return jsonify({'message': 'Login successful'}), 200
    else:
        return jsonify({'message': 'Invalid credentials'}), 401

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

फ्लास्क बैकएंड के साथ जावास्क्रिप्ट में सीओआरएस मुद्दों को हल करना

jQuery का उपयोग करके जावास्क्रिप्ट फ्रंटएंड कोड

// JavaScript (jQuery) frontend script
$(document).ready(function() {
  $("#loginButton").click(function() {
    $.ajax({
      type: 'POST',
      dataType: 'json',
      url: 'http://localhost:5000/login',
      data: JSON.stringify({
        username: 'user',
        password: 'pass'
      }),
      contentType: 'application/json',
      crossDomain: true,
      xhrFields: {
        withCredentials: true
      }
    }).done(function(data) {
      console.log('Login successful');
    }).fail(function(xhr, textStatus, errorThrown) {
      alert('Error: ' + xhr.responseText);
    });
  });
});

फ्लास्क में CORS की स्थापना

फ्लास्क का उपयोग करके पायथन बैकएंड कोड

# Python (Flask) backend script
from flask import Flask, request, jsonify
from flask_cors import CORS

app = Flask(__name__)
CORS(app, supports_credentials=True)

@app.route('/login', methods=['POST'])
def login():
    data = request.get_json()
    username = data.get('username')
    password = data.get('password')

    if username == 'user' and password == 'pass':
        return jsonify({'message': 'Login successful'}), 200
    else:
        return jsonify({'message': 'Invalid credentials'}), 401

if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5000)

CORS समस्याएँ ब्राउज़र में क्यों होती हैं, पोस्टमैन में क्यों नहीं?

क्रॉस-ओरिजिनल रिसोर्स शेयरिंग (सीओआरएस) के बारे में समझने का एक महत्वपूर्ण पहलू वह सुरक्षा तंत्र है जिसे ब्राउज़र उपयोगकर्ताओं की सुरक्षा के लिए लागू करते हैं। ब्राउज़र समान-उत्पत्ति नीति लागू करते हैं, जो वेब पेजों को वेब पेज परोसने वाले डोमेन से भिन्न डोमेन पर अनुरोध करने से रोकता है। यह दुर्भावनापूर्ण वेबसाइटों को जावास्क्रिप्ट के माध्यम से अन्य वेबसाइटों पर संवेदनशील जानकारी तक पहुंचने से रोकने के लिए एक सुरक्षा उपाय है। जब आप XMLHttpRequest बनाते हैं या किसी ब्राउज़र से अनुरोध प्राप्त करते हैं, तो यह इसकी जाँच करता है 'Access-Control-Allow-Origin' सर्वर से प्रतिक्रिया में हेडर. यदि यह हेडर मौजूद नहीं है या अनुरोधित मूल की अनुमति नहीं देता है, तो ब्राउज़र अनुरोध को ब्लॉक कर देगा, जिसके परिणामस्वरूप CORS त्रुटि होगी।

दूसरी ओर, पोस्टमैन एक ब्राउज़र नहीं है बल्कि एपीआई के परीक्षण के लिए एक उपकरण है। यह समान-उत्पत्ति नीति को लागू नहीं करता है क्योंकि यह ब्राउज़र वातावरण में नहीं चल रही है। इसलिए, यह समान सुरक्षा जांच नहीं करता है और बिना किसी प्रतिबंध के किसी भी डोमेन पर अनुरोध करने की अनुमति देता है। यही कारण है कि समान अनुरोध करने के लिए पोस्टमैन का उपयोग करते समय आपको CORS समस्याओं का सामना नहीं करना पड़ता है। डेवलपर्स के लिए सीओआरएस से संबंधित समस्याओं का प्रभावी ढंग से निवारण और समाधान करने के लिए इस अंतर को समझना महत्वपूर्ण है। उपयुक्त सीओआरएस हेडर को शामिल करने के लिए सर्वर को कॉन्फ़िगर करके, आप यह सुनिश्चित कर सकते हैं कि आपका वेब एप्लिकेशन बाहरी एपीआई के साथ सुरक्षित रूप से और त्रुटियों के बिना संचार कर सकता है।

सीओआरएस और जावास्क्रिप्ट के बारे में सामान्य प्रश्न और उत्तर

  1. सीओआरएस क्या है?
  2. सीओआरएस का मतलब क्रॉस-ओरिजिनल रिसोर्स शेयरिंग है, एक ऐसा तंत्र जो किसी वेब पेज पर प्रतिबंधित संसाधनों को उस डोमेन के बाहर किसी अन्य डोमेन से अनुरोध करने की अनुमति देता है जहां से संसाधन उत्पन्न हुआ है।
  3. ब्राउज़र समान-उत्पत्ति नीति क्यों लागू करते हैं?
  4. समान-उत्पत्ति नीति उपयोगकर्ताओं के डेटा की सुरक्षा और दुर्भावनापूर्ण वेबसाइटों को जावास्क्रिप्ट के माध्यम से अन्य डोमेन से संवेदनशील जानकारी तक पहुंचने से रोकने के लिए लागू की जाती है।
  5. डाकिया CORS लागू क्यों नहीं करता?
  6. पोस्टमैन CORS को लागू नहीं करता है क्योंकि यह एक ब्राउज़र नहीं है और ब्राउज़र वातावरण में नहीं चलता है, इसलिए इसे समान-उत्पत्ति नीति का पालन करने की आवश्यकता नहीं है।
  7. मैं अपने वेब एप्लिकेशन में CORS त्रुटि का समाधान कैसे कर सकता हूं?
  8. CORS त्रुटि को हल करने के लिए, उपयुक्त को शामिल करने के लिए सर्वर को कॉन्फ़िगर करें 'Access-Control-Allow-Origin' प्रतिक्रिया में हेडर, अनुरोध करने वाले मूल की अनुमति देता है।
  9. क्या करता है 'Access-Control-Allow-Origin' शीर्षलेख करें?
  10. 'Access-Control-Allow-Origin' हेडर निर्दिष्ट करता है कि किन मूल स्रोतों को संसाधन तक पहुंचने की अनुमति है, जो क्रॉस-मूल अनुरोधों को सक्षम करता है।
  11. का उद्देश्य क्या है withCredentials XMLHttpRequest में?
  12. withCredentials प्रॉपर्टी इंगित करती है कि क्रॉस-साइट एक्सेस-कंट्रोल अनुरोध कुकीज़ या प्राधिकरण हेडर जैसे क्रेडेंशियल्स का उपयोग करके किया जाना चाहिए या नहीं।
  13. मेरे सर्वर में शामिल होने के बावजूद मुझे CORS त्रुटि क्यों मिलती है 'Access-Control-Allow-Origin' हेडर?
  14. यदि अन्य आवश्यक CORS हेडर, जैसे कि आपको अभी भी CORS त्रुटि मिल सकती है 'Access-Control-Allow-Methods' या 'Access-Control-Allow-Headers', अनुपलब्ध हैं या गलत तरीके से कॉन्फ़िगर किए गए हैं।
  15. क्या मैं अपने ब्राउज़र में CORS को अक्षम कर सकता हूँ?
  16. किसी ब्राउज़र में CORS को अक्षम करने की अनुशंसा नहीं की जाती क्योंकि यह सुरक्षा से समझौता करता है। इसके बजाय, CORS को ठीक से संभालने के लिए अपने सर्वर को कॉन्फ़िगर करें।
  17. CORS में उड़ान पूर्व अनुरोध क्या है?
  18. प्रीफ़्लाइट अनुरोध ब्राउज़र द्वारा OPTIONS पद्धति का उपयोग करके किया गया एक प्रारंभिक अनुरोध है, जो यह निर्धारित करता है कि वास्तविक अनुरोध भेजना सुरक्षित है या नहीं। यह सर्वर पर आवश्यक CORS हेडर की जाँच करता है।

चर्चा का समापन

वेब डेवलपर्स के लिए CORS और समान मूल नीति की बारीकियों को समझना आवश्यक है। जबकि ब्राउज़र उपयोगकर्ताओं की सुरक्षा के लिए सख्त सुरक्षा उपाय लागू करते हैं, पोस्टमैन जैसे उपकरण इन प्रतिबंधों को दरकिनार कर देते हैं, जिससे एपीआई का परीक्षण करना आसान हो जाता है। आवश्यक CORS हेडर के साथ बैकएंड को ठीक से कॉन्फ़िगर करके, डेवलपर्स फ्रंटएंड और बैकएंड के बीच सुचारू और सुरक्षित संचार सुनिश्चित कर सकते हैं। कार्यात्मक और उपयोगकर्ता के अनुकूल वेब एप्लिकेशन बनाने के लिए CORS मुद्दों को संबोधित करना महत्वपूर्ण है।