ظهور الخطأ No 'Access-Control-Allow-Origin' header is present on the requested resource عند إرسال طلب من react إلى node

هذا الخطأ يُسمى CORS (خطأ اشتراك المصادر في الموارد)

هذا الخطأ يحدث عندما يحاول موقع الوصول إلى موارد موجودة على نطاق أخر غير نطاقه,

ولحل هذه المشكلة نتبع الخطوات الأتية :

1. تثبيت الcors module 

   npm i cors

    

2. نقوم بإستدعاؤه

   const express = require('express')
   const cors = require('cors')
   const app = express()

    

3. نقوم بوضعه كبرمجية وسيطة(middleware)

   app.use(cors({
     origin: '*'
   }))

   إذا كنت تريد ان تجعل الapi متاحة لنطاقات معينة فلتمسح علامة ال* وضع بدلاً منها النطاقات 

يمكنك تجاوز هذا الخطأ أيضا بتعديل ملف package.json لتطبيق React وإضافة عنونا الوجهة التي ترسل اليها الطلبات كالتالي

{
  ...
  "proxy": "http://localhost:4000", //رابط لعنوان الوجهة التي ترسل اليها الطلبات
}

ومن ثم اعادة تشغيل التطبيق، سيقوم React بإنشاء مخدم محلي يستقبل جميع طلبات تطبيقك ومن ثم اعادة ارسالها لعنوان الوجهة السابق (نقوم بهذا الحل فقط في طور التطوير)
يفيد بتجاوز منع المتصفح تطبيقك من ارسال طلبات لنطاق مختلف عن نطاقك المحلي