يمكن أن تكون معالجة مشكلات CORS (مشاركة الموارد عبر الأصل) وتصحيحها في تطبيق NestJS صعبة بعض الشيء. CORS هي في الأساس آلية الأمان التي تتأكد من أن الواجهة الأمامية والخلفية الخاصة بك يمكنهما التحدث مع بعضهما البعض بشكل صحيح، خاصة عندما يكونان في نطاقات مختلفة. فيما يلي ملخص حول كيفية التعامل مع CORS في NestJS واستكشاف المشكلات الشائعة وإصلاحها:

1. تمكين CORS في NestJS

لتمكين CORS في تطبيق NestJS، تحتاج إلى تكوينه داخل ملف main.ts حيث يتم إنشاء مثيل تطبيق NestJS. يمكنك تمكين CORS باستخدام طريقة EnableCors التي يوفرها NestJS NestFactory.

مثال للتكوين:

import { NestFactory } from '@nestjs/core';
import { AppModule } from './app.module';

async function bootstrap() {
  const app = await NestFactory.create(AppModule);

  // Enabling CORS with default settings
  app.enableCors();

  // Enabling CORS with specific settings
  app.enableCors({
    origin: 'http://your-frontend-domain.com', // Allow requests from this domain
    methods: 'GET,HEAD,PUT,PATCH,POST,DELETE', // Allow these methods
    allowedHeaders: 'Content-Type, Authorization', // Allow these headers
    credentials: true, // Allow credentials (cookies, HTTP authentication)
  });

  await app.listen(3000);
}
bootstrap();

2. تصحيح مشكلات CORS

إذا واجهت مشكلات CORS، فاتبع الخطوات التالية لتصحيح الأخطاء وحلها:

التحقق من تكوين CORS

• التحقق من الأصول المسموح بها: تأكد من أن خاصية الأصل في تكوين app.enableCors تتضمن مجال تطبيق الواجهة الأمامية الخاص بك.
• الطرق والرؤوس: تأكد من أن الطرق وخصائص الرؤوس المسموح بها قد تم ضبطها بشكل صحيح وفقًا لاحتياجات تطبيق الواجهة الأمامية لديك.

فحص طلبات الشبكة

• أدوات تطوير المتصفح: استخدم أدوات مطور المتصفح (الموجودة عادةً ضمن علامة التبويب "الشبكة") لفحص رؤوس الطلب والاستجابة. ابحث عن Access-Control-Allow-Origin، وAccess-Control-Allow-Methods، وAccess-Control-Allow-Headers في رؤوس الاستجابة.
• طلبات الاختبار المبدئي: إذا كنت تستخدم طرق HTTP غير قياسية أو رؤوس مخصصة، فتأكد من أن الخادم يتعامل بشكل صحيح مع طلبات الاختبار المبدئي (طلبات OPTIONS).

التحقق من سجلات الخادم

• سجلات وحدة التحكم: أضف سجلات وحدة التحكم إلى التعليمات البرمجية من جانب الخادم للتحقق مما إذا كانت الطلبات تصل إلى الخادم وما إذا كان يتم تطبيق رؤوس CORS بشكل صحيح.
• رسائل الخطأ: ابحث في سجلات الخادم عن أي أخطاء تتعلق بتكوين CORS.

التحقق من تكوين الوكيل

• التطوير المحلي: إذا كنت تستخدم وكيلًا للتطوير المحلي (على سبيل المثال، http-proxy-middleware في تطبيق React)، فتأكد من تكوينه بشكل صحيح وإعادة توجيه الطلبات كما هو متوقع.
• رؤوس الوكيل: تأكد من أن الوكيل لا يقوم بتعديل أو إزالة أي رؤوس CORS مطلوبة.

اختبار باستخدام cURL

• أوامر cURL: استخدم cURL لاختبار نقاط نهاية واجهة برمجة التطبيقات مباشرة ومراقبة ما إذا تم إرجاع رؤوس CORS بشكل صحيح. يمكن أن يساعد هذا في عزل ما إذا كانت المشكلة تتعلق بالواجهة الأمامية أم بتكوين الواجهة الخلفية.

  curl -i -X OPTIONS http://localhost:3000/api/v1/resource -H "Origin: http://your-frontend-domain.com"

مشكلات CORS الشائعة

• أصول عدم التطابق: تأكد من أن الأصل في الطلب يطابق الأصل المحدد في تكوين CORS.
• رؤوس غير صحيحة: تحقق من تضمين جميع الرؤوس الضرورية في تكوين الرؤوس المسموح بها.
• بيانات الاعتماد المفقودة: إذا كانت بيانات الاعتماد متضمنة (على سبيل المثال، ملفات تعريف الارتباط)، فتأكد من بيانات الاعتماد: تم تعيين true في تكوين CORS.

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