فهم أخطاء CORS في jQuery ولكن ليس في Postman

لماذا تحدث أخطاء CORS في المتصفحات؟

عند العمل باستخدام JavaScript للاتصال بواجهة برمجة تطبيقات RESTful، قد تواجه الخطأ "لا يوجد رأس 'Access-Control-Allow-Origin' موجود على المورد المطلوب". يحدث هذا الخطأ عادةً بسبب نفس سياسة المنشأ الخاصة بالمتصفح، والتي تمنع صفحات الويب من تقديم طلبات إلى نطاق مختلف عن النطاق الذي يخدم صفحة الويب.

ومن المثير للاهتمام أنه عندما يتم تقديم نفس الطلب من خلال أدوات مثل Postman، لا يحدث مثل هذا الخطأ. قد يكون هذا الاختلاف محيرًا للمطورين. يعد فهم سبب حظر XMLHttpRequest أو مكالمات الجلب بواسطة CORS في المتصفح، ولكن ليس في Postman، أمرًا ضروريًا لاستكشاف الأخطاء وإصلاحها وتطوير تطبيقات الويب الآمنة.

حل مشكلات CORS في JavaScript باستخدام Flask Backend

كود جافا سكريبت للواجهة الأمامية باستخدام 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 في القارورة

كود الواجهة الخلفية لبايثون باستخدام Flask

# 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 في JavaScript باستخدام Flask Backend

كود جافا سكريبت للواجهة الأمامية باستخدام 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 في القارورة

كود الواجهة الخلفية لبايثون باستخدام Flask

# 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 في المتصفحات وليس في Postman

أحد الجوانب المهمة التي يجب فهمها حول مشاركة الموارد عبر الأصل (CORS) هو آلية الأمان التي تنفذها المتصفحات لحماية المستخدمين. تفرض المتصفحات سياسة المصدر نفسه، والتي تمنع صفحات الويب من تقديم طلبات إلى مجال مختلف عن ذلك الذي يخدم صفحة الويب. يعد هذا إجراءً أمنيًا لمنع مواقع الويب الضارة من الوصول إلى المعلومات الحساسة الموجودة على مواقع الويب الأخرى من خلال JavaScript. عند إجراء طلب XMLHttpRequest أو جلب طلب من المتصفح، فإنه يتحقق من وجود 'Access-Control-Allow-Origin' رأس في الاستجابة من الخادم. إذا لم يكن هذا الرأس موجودًا أو لا يسمح بأصل الطلب، فسيقوم المتصفح بحظر الطلب، مما يؤدي إلى حدوث خطأ CORS.

ومن ناحية أخرى، فإن Postman ليس متصفحًا ولكنه أداة لاختبار واجهات برمجة التطبيقات. ولا يفرض سياسة نفس الأصل لأنه لا يعمل داخل بيئة المتصفح. ولذلك، فهو لا يقوم بنفس عمليات التحقق الأمني ​​ويسمح بتقديم الطلبات إلى أي مجال دون قيود. ولهذا السبب لا تواجه مشكلات CORS عند استخدام Postman لتقديم نفس الطلب. يعد فهم هذا الاختلاف أمرًا بالغ الأهمية للمطورين لاستكشاف المشكلات المتعلقة بـ CORS وحلها بشكل فعال. من خلال تكوين الخادم ليشمل رؤوس CORS المناسبة، يمكنك التأكد من أن تطبيق الويب الخاص بك يمكنه الاتصال بواجهات برمجة التطبيقات الخارجية بشكل آمن ودون أخطاء.

أسئلة وأجوبة شائعة حول CORS وJavaScript

1. ما هو كورس؟
2. CORS تعني مشاركة الموارد عبر الأصل، وهي آلية تسمح بطلب الموارد المقيدة على صفحة الويب من مجال آخر خارج النطاق الذي نشأ منه المورد.
3. لماذا تفرض المتصفحات سياسة المصدر نفسه؟
4. يتم فرض سياسة نفس المصدر لحماية بيانات المستخدمين ومنع مواقع الويب الضارة من الوصول إلى المعلومات الحساسة من المجالات الأخرى من خلال JavaScript.
5. لماذا لا يقوم Postman بفرض CORS؟
6. لا يفرض Postman 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 وسياسة الأصل نفسها أمرًا ضروريًا لمطوري الويب. بينما تفرض المتصفحات إجراءات أمنية صارمة لحماية المستخدمين، فإن أدوات مثل Postman تتجاوز هذه القيود، مما يسهل اختبار واجهات برمجة التطبيقات. من خلال تكوين الواجهة الخلفية بشكل صحيح باستخدام رؤوس CORS الضرورية، يمكن للمطورين ضمان الاتصال السلس والآمن بين الواجهة الأمامية والخلفية. تعد معالجة مشكلات CORS أمرًا بالغ الأهمية لإنشاء تطبيقات ويب وظيفية وسهلة الاستخدام.