cors policy in react

وعليكم السلام ورحمة الله وبركاته .

مشكلة ال cors هى مشكلة شائعه حيث تكمن تلك المشكلة في إرسال طلب من خادم إلى خادم أخر مختلف .

فإذا لم يكن ذلك الخادم الذى يستقبل الطلب قد قام بتفعيل ال cors واضافة الخادم الذى يرسل الطلب فإن الطلب لن يتم تنفيذه وذلك لاضافة حمابة وأمان للسيرفرات من الإختراق والطلبات الوهمية  .

تعتمد حل المشكلة على نوع و لغة برمجة الخادم الذى يستقبل الطلب . ويوجد حل يتوفر على جميع السيرفرات وهو من خلال إنشاء ملف htaccess. ووضع هذه الأسطر بداخله .

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, PUT, POST, DELETE"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

ويمكن قراءة الإجابات فى السؤال التالى وستحل المشكلة معك إن شاء الله

بتاريخ 3 دقائق مضت قال محمد_عاطف:

وعليكم السلام ورحمة الله وبركاته .

مشكلة ال cors هى مشكلة شائعه حيث تكمن تلك المشكلة في إرسال طلب من خادم إلى خادم أخر مختلف .

فإذا لم يكن ذلك الخادم الذى يستقبل الطلب قد قام بتفعيل ال cors واضافة الخادم الذى يرسل الطلب فإن الطلب لن يتم تنفيذه وذلك لاضافة حمابة وأمان للسيرفرات من الإختراق والطلبات الوهمية  .

تعتمد حل المشكلة على نوع و لغة برمجة الخادم الذى يستقبل الطلب . ويوجد حل يتوفر على جميع السيرفرات وهو من خلال إنشاء ملف htaccess. ووضع هذه الأسطر بداخله .

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Methods "GET, PUT, POST, DELETE"
Header set Access-Control-Allow-Headers "Content-Type, Authorization"

ويمكن قراءة الإجابات فى السؤال التالى وستحل المشكلة معك إن شاء الله

 

انا استعمل react مع php server

بتاريخ 2 دقائق مضت قال Ahmed Ebrahim11:

انا استعمل react مع php server

يمكنك وضع هذه الأكواد فى ملف php واستدعاءه فى المكان الذى تريد أن تسمح الوصول له من أى خادم آخر .

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header("Access-Control-Allow-Headers: X-Requested-With");

تلك المشكلة شائعة ويجب عليك فهمها فهي خاصة بأمر هام وهو CORS.

وتحدث مشكلة الـ CORS (Cross-Origin Resource Sharing) عندما يحاول تطبيق ويب الوصول إلى موارد من نطاق مختلف (أو بروتوكول أو منفذ مختلف) بدون التصريح المناسب.

أي الإتصال من http://localhost:3000 في الواجهة الأمامية على http://127.0.0.1:4000 مثلاً في الواجهة الخلفية، لاحظ هنا منفذين مختلفين، بالتالي يرسل المتصفح طلبًا مسبقًا إلى الخادم للتحقق مما إذا كان مسموحًا للعميل بالوصول إلى المورد (السيرفر).

ويتضمن الطلب رأسًا خاصًا يسمى Origin، والذي يحتوي على عنوان URL لموقع الويب العميل.

ثم يستجيب الخادم برأس Access-Control-Allow-Origin، والذي يحدد مواقع الويب التي يُسمح لها بالوصول إلى المورد.

أي CORS هو مصطلح وببساطة، هو آلية أمان في متصفحات الويب تتحكم في كيفية تفاعل مواقع الويب المختلفة مع بعضها البعض.

ما الفائدة منها؟

ببساطة تمنع CORS المواقع الضارة من سرقة البيانات من المواقع الأخرى وتجعل من الصعب على المتسللين اختراق المواقع الإلكترونية، وتُتيح للتطبيقات الويب التفاعل مع بعضها البعض، حتى لو كانت تستضيفها مواقع ويب مختلفة.

لذا في الخادم علينا إضافة الرؤوس (headers) المطلوبة في ملفات PHP للسماح بالوصول من نطاق محدد:

<?php
header("Access-Control-Allow-Origin: http://localhost:3000");
header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, OPTIONS");
header("Access-Control-Allow-Headers: Content-Type, Authorization");
?>

عليك وضع الكود السابق في بداية كل ملف تريد الوصول إليه وتعديل منفذ الواجهة الأمامية 3000 بما لديك أنت.

أو إنشاء ملف منفصل وكتابة به ما سبق وليكن باسم cors.php ثم استيراده 

<?php
include 'path/to/config.php';
// تابع بقية الكود 
?>

أو تضمينه في أي ملف موجد في جميع الملفات الديك مثل config.php أو init.php.

لكن الطريقة الأفضل وضع التالي في ملف  .htaccess:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "http://localhost:3000"
    Header set Access-Control-Allow-Methods "GET, POST, PUT, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type, Authorization"
</IfModule>