jQuery میں CORS کی خرابیوں کو سمجھنا لیکن پوسٹ مین میں نہیں۔

براؤزر میں CORS کی خرابیاں کیوں ہوتی ہیں؟

RESTful API سے جڑنے کے لیے JavaScript کے ساتھ کام کرتے وقت، آپ کو "No 'Access-Control-Allow-Origin' ہیڈر درخواست کردہ وسائل پر موجود نہیں ہے" کی خرابی کا سامنا ہو سکتا ہے۔ یہ خرابی عام طور پر براؤزر کی Same Origin پالیسی کی وجہ سے ہوتی ہے، جو ویب پیجز کو ویب پیج کو پیش کرنے والے سے مختلف ڈومین پر درخواستیں کرنے سے روکتی ہے۔

دلچسپ بات یہ ہے کہ جب یہی درخواست پوسٹ مین جیسے ٹولز کے ذریعے کی جاتی ہے تو ایسی کوئی غلطی نہیں ہوتی۔ یہ فرق ڈویلپرز کے لیے پریشان کن ہو سکتا ہے۔ یہ سمجھنا کہ XMLHttpRequest یا fetch کالز کو CORS کے ذریعے براؤزر میں کیوں بلاک کیا جاتا ہے، لیکن پوسٹ مین میں نہیں، محفوظ ویب ایپلیکیشنز کو خراب کرنے اور تیار کرنے کے لیے بہت ضروری ہے۔

فلاسک بیک اینڈ کے ساتھ جاوا اسکرپٹ میں 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);
    });
  });
});

فلاسک میں 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 کے مسائل حل کرنا

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 کے مسائل براؤزرز میں ہوتے ہیں اور پوسٹ مین میں نہیں۔

کراس اوریجن ریسورس شیئرنگ (CORS) کے بارے میں سمجھنے کے لیے ایک اہم پہلو حفاظتی طریقہ کار ہے جسے براؤزر صارفین کی حفاظت کے لیے نافذ کرتے ہیں۔ براؤزرز Same-Origin پالیسی کو نافذ کرتے ہیں، جو ویب صفحات کو ویب صفحہ کی خدمت کرنے والے سے مختلف ڈومین پر درخواستیں کرنے سے روکتی ہے۔ یہ نقصان دہ ویب سائٹس کو JavaScript کے ذریعے دیگر ویب سائٹس پر حساس معلومات تک رسائی سے روکنے کے لیے حفاظتی اقدام ہے۔ جب آپ کسی براؤزر سے XMLHttpRequest یا بازیافت کی درخواست کرتے ہیں، تو یہ چیک کرتا ہے۔ 'Access-Control-Allow-Origin' سرور سے جواب میں ہیڈر۔ اگر یہ ہیڈر موجود نہیں ہے یا درخواست کی اصل کی اجازت نہیں دیتا ہے، تو براؤزر درخواست کو بلاک کردے گا، جس کے نتیجے میں CORS کی خرابی ہوگی۔

دوسری طرف پوسٹ مین ایک براؤزر نہیں بلکہ APIs کو جانچنے کا ایک ٹول ہے۔ یہ Same-Origin پالیسی کو نافذ نہیں کرتا ہے کیونکہ یہ براؤزر کے ماحول میں نہیں چل رہا ہے۔ لہذا، یہ ایک جیسے سیکورٹی چیک نہیں کرتا ہے اور بغیر کسی پابندی کے کسی بھی ڈومین پر درخواستیں کرنے کی اجازت دیتا ہے۔ یہی وجہ ہے کہ پوسٹ مین کو ایک ہی درخواست کرنے کے لیے استعمال کرتے وقت آپ کو CORS کے مسائل کا سامنا نہیں ہوتا ہے۔ ڈیولپرز کے لیے CORS سے متعلقہ مسائل کو مؤثر طریقے سے حل کرنے اور حل کرنے کے لیے اس فرق کو سمجھنا بہت ضروری ہے۔ مناسب CORS ہیڈرز کو شامل کرنے کے لیے سرور کو ترتیب دے کر، آپ اس بات کو یقینی بنا سکتے ہیں کہ آپ کی ویب ایپلیکیشن بیرونی APIs کے ساتھ محفوظ طریقے سے اور غلطیوں کے بغیر بات چیت کر سکتی ہے۔

CORS اور JavaScript کے بارے میں عام سوالات اور جوابات

1. CORS کیا ہے؟
2. CORS کا مطلب ہے کراس اوریجن ریسورس شیئرنگ، ایک ایسا طریقہ کار جو ویب صفحہ پر محدود وسائل کو اس ڈومین سے باہر کسی دوسرے ڈومین سے درخواست کرنے کی اجازت دیتا ہے جہاں سے وسائل کی ابتدا ہوئی ہے۔
3. براؤزر ایک ہی اصل کی پالیسی کیوں نافذ کرتے ہیں؟
4. Same-Origin پالیسی کو صارفین کے ڈیٹا کی حفاظت اور جاوا اسکرپٹ کے ذریعے دیگر ڈومینز سے حساس معلومات تک رسائی سے نقصاندہ ویب سائٹس کو روکنے کے لیے نافذ کیا جاتا ہے۔
5. پوسٹ مین CORS کو نافذ کیوں نہیں کرتا؟
6. پوسٹ مین CORS کو نافذ نہیں کرتا ہے کیونکہ یہ براؤزر نہیں ہے اور براؤزر کے ماحول میں نہیں چلتا ہے، اس لیے اسے Same-Origin پالیسی پر عمل کرنے کی ضرورت نہیں ہے۔
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 اور Same Origin Policy کی باریکیوں کو سمجھنا ضروری ہے۔ اگرچہ براؤزر صارفین کی حفاظت کے لیے سخت حفاظتی اقدامات نافذ کرتے ہیں، لیکن پوسٹ مین جیسے ٹولز ان پابندیوں کو نظرانداز کرتے ہیں، جس سے APIs کی جانچ کرنا آسان ہو جاتا ہے۔ ضروری CORS ہیڈرز کے ساتھ بیک اینڈ کو صحیح طریقے سے ترتیب دینے سے، ڈویلپرز فرنٹ اینڈ اور بیک اینڈ کے درمیان ہموار اور محفوظ مواصلت کو یقینی بنا سکتے ہیں۔ فعال اور صارف دوست ویب ایپلیکیشنز بنانے کے لیے CORS کے مسائل کو حل کرنا بہت ضروری ہے۔