[MUSIC]
بعد فهم بعض التفاصيل حول كورس في المحاضرة السابقة،
في هذا التمرين سوف نستخدم وحدة عقدة كورس وتكوين الخادم السريع لدينا.
لتمكين الخادم من الاستجابة مع
الرؤوس ذات الصلة cors إلى الطلب الوارد من موقع العميل.
للبدء كما تتوقع، سنقوم أولا بتثبيت وحدة عقدة كورس.
لذلك في موجه، اكتب npm install.
تأكد من أنك في مجلد خادم الارتباك، ثم cors - حفظ.
ثم قم بتثبيت وحدة كورس.
وكما ترون، في هذه الدورة أنا باستخدام كورس @2 .8.4.
بمجرد تثبيت وحدة كورس،
دعونا نذهب إلى المحرر لدينا ومن ثم تكوين الخادم السريع لدينا.
الذهاب إلى محررنا
الآن في مجلد المسارات، والآن هذا هو المكان الذي سأطبق
في المقام الأول وحدة كورس لأن هذا هو المكان الذي يتم فيه خدمة جميع الطرق المختلفة.
حتى في مجلد المسارات، وسوف أضيف في ملف جديد باسم cors.js.
ثم في هذا الملف، سنقوم بتكوين وحدة كورس.
الآن هذه هي طريقي لوضع جميع المعلومات المتعلقة
كورس في وحدة عقدة واحدة منفصلة قائمة على ملف هنا.
حتى في موجه،
اسمحوا لي أن أحاول كونست إكسبريس =
تتطلب ('إكسبريس').
ودعونا نحصل
على وحدة الكورس في.
Const app = express ()؛
ثم دعنا نقول قائمة بيضاء من مجموعة من السلاسل.
تحتوي القائمة البيضاء على كافة الأصول
التي يرغب هذا الخادم في قبولها.
الآن أنا ذاهب لتشمل اثنين منهم هنا،
لوكالهوست: 3000
وبعد ذلك، المضيف المحلي 3443.
وإذا كنت بحاجة إلى المزيد من الأصول ليتم إضافتها إلى القائمة البيضاء الخاصة بك، يمكنك ببساطة إضافتها
إلى القائمة البيضاء الخاصة بك لأنني أحاول صراحة تكوين بلدي كورس الوحدة النمطية.
حتى هنا، سوف أعلن
وظيفة A هنا،
مع الطلب والاتصال مرة أخرى يجري تعريفها هنا.
وداخل هذا أنا ذاهب لمعرفة أن الخيارات كورس هنا.
لذلك سأبدأ بقول CorsOptions،
var CorsOptions؛ ثم
سأقول إذا كان (whiteList.indexOf (req.header ('Origin'-
)).
لذلك يمكنك أن ترى أننا هنا نحدد في التعليمات البرمجية هنا،
ونحن نقول req.header.
لذلك إذا كان رأس الطلب الوارد يحتوي على خلاصة أصل،
فسنقوم بالتحقق من هذه القائمة البيضاء.
تبحث عن هذا الأصل معين، هل هو موجود في هذه القائمة البيضاء؟
لذلك هذا هو السبب في أننا نقول WhiteList.indexOf.
لذلك هذه هي عملية صفيف يجري القيام بها هنا.
وسنقول في الأصل لا يساوي -1.
كما تعلمون، فإن فهرس العملية سيعود الفهرس أكبر من أو
يساوي الصفر إذا كان هذا موجودًا في هذا الصفيف.
سيعود -1 إذا لم يكن هذا موجودًا في هذه الصفيف.
لذلك طريقة سريعة جدا للتحقق لمعرفة ما إذا كان
أصل الطلبات الواردة في القائمة البيضاء.
في هذه الحالة، سنقول
CorsOptions، CorsOptions.
CorsOptions = وهذا هو المكان الذي
سأحدد فيه {origin: true}
لذلك بقول {origin: true}، مما يعني أن
الأصل الأصلي في الطلب الوارد موجود في القائمة البيضاء.
لذا سأسمح بقبوله
لذلك عندما أقوم بتعيين الأصل يساوي true هنا،
فسترد الوحدة النمطية الخاصة بي قائلة إن التحكم في الوصول يسمح بالأصل، ثم قم بتضمين هذا الأصل في
الرؤوس باستخدام عنصر التحكم في الوصول يسمح بمفتاح الأصل هناك.
وبهذه الطريقة سيتم إبلاغ جانب العميل الخاص بي قائلا أنه لا بأس
أن يقبل الخادم هذا الطلب لهذا الأصل بالذات.
خلاف ذلك، لذلك إذا لم يكن هذا هو الحال، لذلك
إذا لم يكن req.header ('Origin') في
القائمة البيضاء، فسترى CorsOptions.
{ الأصل: false}.
لذلك عند تعيين الأصل إلى false، فلن يتم
إرجاع وحدة تحكم الوصول AlloWoriGin بواسطة موقع الخادم الخاص بي.
ثم مرة واحدة ونحن قد فعلت ذلك،
ثم سنقول رد الاتصال (فارغة، كورسوبتيونس)؛.
هذا كل شيء لذلك من خلال استدعاء هذه الوظيفة هنا،
CorsoptionsDelegate هنا، سنتحقق لمعرفة ما إذا كان
الطلب الوارد ينتمي إلى أحد أصول القائمة البيضاء.
إذا كان كذلك، ثم الرد مرة أخرى مع التحكم
في الوصول ألوريجين مع أصل الطلب تعيين في هناك.
وإلا فإنه لن تشمل التحكم في الوصول AlloWoriGin عندما يرد.
الآن، من هذه الوظيفة، سنقوم بتصدير كورس كما كورس هنا.
الآن، إذا قمت بتكوين وحدة كورس ببساطة عن طريق قول كورس
دون أي خيارات، ثم وهذا يعني أن هذا سوف الرد
مرة أخرى مع التحكم في الوصول ألوريجين مع عدد بطاقات البرية.
هناك بعض القواعد التي يكون من المقبول القيام بها،
خاصة عندما نقوم بإجراء عمليات الحصول على.
لا بأس من قبول ذلك
خلاف ذلك، سنقول، CorsWithOptions = cors،
وبعد ذلك سنقوم بتوريد) CorsoptionsDelegate)
وظيفة التي قمنا بتحديدها للتو في وقت سابق.
وبهذه الطريقة، إذا كنت بحاجة إلى تطبيق A cors
مع خيارات محددة إلى مسار معين، فسوف نستخدم هذه الوظيفة.
خلاف ذلك، سنقوم ببساطة استخدام كورس القياسية.
الآن بعد أن قمنا بتعريف التعليمات البرمجية ذات الصلة في cors.js،
دعونا نبدأ تطبيق هذا على الطرق المختلفة.
لذلك سنبدأ مع ديشروتر.
لذلك دعونا فتح ديشروتر،
وفي ديشروتر، سنقوم أولا
[الضوضاء] استيراد [الضوضاء]. /كورس.
لاحظ أن ملف cors.js في نفس المجلد، لذلك
يمكننا فقط استيراد ذلك بالقول. /cors.js.
وحدة العقدة المستندة إلى الملف.
الآن، لطلب GET، بمجرد استيرادنا ذلك.
الآن، بالنسبة لـ DishRouter، سأقوم بإعداد حقل الخيارات.
لذلك كما رأيت، كلما كنت بحاجة إلى الاختبار المبدئي لطلباتك،
سيقوم العميل أولاً بإرسال رسالة طلب HTTP OPTIONS ثم الحصول
على الرد من جانب الخادم قبل أن يرسل الطلب الفعلي بالفعل.
لذلك، بالنسبة للخيارات، إذا تم تلقي رسالة الخيارات على هذا الطريق بالذات،
فإننا سوف نستجيب كـ Cors.CorsWithOptions، و،
مع وظيفة رد الاتصال هنا، والتي تقول،
Res.SendStatus، 200.
لسنا بحاجة لإرسال أي شيء أكثر من مجرد الحالة من هنا.
وهكذا، عندما يتم تلقي رسالة خيارات،
عندما يستجيب هذا، سوف نرى ما هي النتائج عندما نرسل طلب خيار
من جانب العميل إلى جانب الخادم في رحلة قصيرة.
الآن، هذه الخيارات، أنا ذاهب لتطبيق على كل طريق.
لذلك، بالنسبة إلى
disHid، للخداع/التعليقات، وأيضا
لبدء تشغيل/التعليقات، /: CommentID.
لذلك، كل الحالات، وأنا ذاهب لتطبيق نفس الخيارات هناك.
الآن، والعودة إلى الوراء،
للحصول على جيت، وأنا ذاهب ببساطة لتطبيق كورس.
لذا، بالنسبة لطلب GET، سأقول، Cors.Cors،
لذا لاحظ أن هذه هي الوسيطة الأولى التي سنطبقها،
وبعد ذلك سوف تنتقل إلى هذه الرسالة هنا.
لذلك يتم تقديم الوسيطة كورس هناك.
بالنسبة إلى POST، سيتم تطبيق Cors.CorsWithOptions.
نفس الشيء لذلك، PUT،
DELETE.
نفس الشيء بالنسبة لما تبقى من POST و PUT و
DELETE على جميع الطرق الأخرى هنا.
بالنسبة إلى GET، سنستخدم فقط الكورس،
لذلك اسمحوا لي فقط بتطبيق CorsWithOptions على POST و
PUT و DELETE في جميع الطرق هنا،
لذلك POST و PUT و DELETE.
الآن، لعملية GET كما رأينا
لإصدار DishRouter أنا فقط طبقت cors.cors،
لذلك أنا ذاهب لنسخ ذلك ومن ثم تطبيقه على جميع GET.
لذلك، لهذا جيت، ثم التمرير لأسفل لهذا جيت،
ثم أيضا للآخر، كما سأطبق نفس الخيار.
لذلك يتم تحديث ديشروتر الخاص بي الآن.
الآن، أنا ذاهب إلى القيام بنفس الشيء مع برومورووتر،
ليدررووتر، و أوبلادوراتور، وأيضا users.js.
لذلك، دعونا فتح ليدرروتر المقبل.
في LeaderRouter، فإن أول شيء بالطبع هو
تضمين وحدة العقدة المستندة إلى ملف cors، لذلك
اسمحوا لي بنسخ ذلك ثم لصقه في LeaderRouter.
ثم الخيارات، وأنا ذاهب لتطبيق نفس الشيء إلى LeaderRouter أيضا.
لذلك ليديرووتر، وسوف تطبيق
كورسويثوبوتيونس، ثم نفس الشيء مع ليدرروتر أو ليدريد.
لديك طريقين فقط هنا، لذلك سأطبق الخيارات لكليهما.
بالنسبة لعمليات GET،
أحتاج إلى تطبيق cors.cors، لذلك نسخ هذا من DishRouter.
هذا GET، سأطبق نفس الشيء،
ثم أيضًا هذا GET، سأطبق نفس الشيء.
الآن، بالنسبة لـ POST و PUT و DELETE، كما رأيت، سنقوم بتطبيق Cors.CorsWithOptions،
للحصول على POST،
ثم PUT، و DELETE.
ونفس الشيء لـ POST و PUT و
DELETE من LeaderID أيضا.
حتى الآن يتم تحديث بلدي ليدررووتر، دعونا نذهب إلى برومورووتر.
وفي برومورووتر أيضا، دعونا نبدأ في الجزء السفلي هنا
لحذف، كورسويثوبوتيونس، بوت، بوست.
ثم إلى هذا حذف، بوت، بوست.
وبالنسبة لـ GET، بالطبع،
يتبع cors.cors هذا GET والآخر GET أسفل هنا.
وبعد ذلك، دعونا استيراد هذا كورس،
لذلك نسخ هذا من بلدي ليدرروتر.
ثم نقوم باستيراد كورس هنا، ثم الخيارات.
لذلك، أنا ذاهب لنسخ الخيارات من هنا ومن
ثم الذهاب إلى برومورووتر، وسوف تطبيق الخيارات هنا.
وأيضا إلى برومورووتر الأخرى، نفس الخيارات.
الآن، أوبلادوراوتر.
حتى انتقل إلى uploadRouter، مرة أخرى
، استيراد، كورس،
ثم بعد ذلك، لuploadrouter.Route،
اسمحوا لي تطبيق الخيارات هناك.
ولـ GET،
سنقول cors.cors.
سيكون POST Cors.CorsWithOptions.
نفس ل, PUT.
وحذف، لذلك يتم تحديث جهاز توجيه التحميل الخاص بي.
آخر واحد هو المستخدمين.
لذلك، في المستخدمين، اسمحوا لي،
استيراد السيارات،
وبعد ذلك، في هذه الحالة لأننا نفعل router.get، router.post، وهلم جرا.
لذلك لكل واحد منهم، وأنا ذاهب للذهاب في وتطبيق صراحة،
cars.CarsWithOptions، حتى بالنسبة ل GET هنا.
لأنه يتم تنفيذ جيت من قبل المشرف هنا،
قد لا يسمح لأي مستخدم آخر لتنفيذ ذلك.
ولكن الاشتراك, أيضا CarsWithOptions
لتسجيل الدخول أيضا سوف تنطبق, هذا كل شيء.
دعونا حفظ جميع التغييرات حتى
يكون لدينا تحديثات جميع الطرق المختلفة لاستخدام السيارات.
دعونا الآن الحصول على الذهاب وبدء الخادم لدينا ومن ثم نرى كيف هذه السيارات تساعدنا.
الذهاب إلى المحطة،
اسمحوا لي أن أبدأ موقع الخادم هنا.
وعندما يتم بدء تشغيل الخادم،
دعونا نذهب إلى ساعي البريد لدينا ومن ثم إرسال طلب جيت.
لذلك عند إرسال طلب جيت إلى المضيف المحلي: 3000duses،
سوف تحصل على الفور استجابة من جانب الخادم.
بالطبع الآن قاعدة البيانات الخاصة بي فارغة حتى أحصل على مصفوفة فارغة هنا، ولكن
دعونا ننظر بشكل خاص إلى الرؤوس لأن هذا هو
المكان الذي تهمنا فيه في هذا التمرين.
حتى هنا، يمكنك أن ترى أن لدينا رأس إضافي
هنا يسمى Access-Control-Allow-Origin.
وبالتالي فإن الوصول - التحكم - السماح - الأصل كما ترون يوفر السيارة البرية،
وهو النجم هنا.
وهذا يعني أنه، أي أصل للوصول إلى هذا المورد معين،
لذلك يقول الخادم أنه موافق، سيتم السماح لأي أصل للوصول إلى هذا المورد.
لطلب GET نحن سعداء بذلك.
دعونا الآن تسجيل أنفسنا في النظام،
وبعد ذلك بمجرد أن نحصل على الرمز المميز، اسمحوا لي أن أنسخ الرمز المميز هنا.
وبعد ذلك سنقوم بإجراء عملية حذف على موقع الخادم الخاص بنا.
لذلك سنقوم بحذف الأطباق هنا، لذلك
اسمحوا لي تضمين، رمز في رأس التفويض هنا.
ولاحظ أيضًا أنه بالنسبة لعملية الحذف، أقوم بتعيين الأصل.
لذلك حقل آخر هنا يسمى الأصل إلى httpslocalhost:3343 هنا.
لذلك تشير إلى أن عملية الحذف هذه
تحاول في الواقع حذف في هذا الأصل معين هنا.
وهكذا عندما نقوم بتنفيذ هذه العملية، إذا كنت تقوم بذلك من متصفح،
فسيتم تعيين الأصل تلقائيًا بواسطة المتصفح
استنادًا إلى صفحة الويب التي ينشأ منها الطلب.
ولكن هنا، بما أننا نستخدم ساعي البريد، لا بد لي من تعيين الأصل بشكل صريح هنا.
لذلك اسمحوا لي أن أرسل في الطلب مع هذا الحقل الأصل تعيين هنا.
ثم ستلاحظ أن حقل الرأس يحتوي الآن على
Access-Control-Allow-Origin مع المضيف المحلي: 3443 المحدد هنا.
وكما ستلاحظ أن هذا الأصل موجود في القائمة البيضاء.
لهذا السبب يتم تعيين هذا Access-Control-Allow-Origin إلى
نفس الأصل الذي حددناه هناك.
إذا قمت بتحديد أصل مختلف على سبيل المثال،
إذا قمت بتحديد، قل localhost: 2000 على سبيل المثال.
ستلاحظ أن هذا لن يكون، في الرد القادم من الخادم،
لن يحتوي هذا على تعيين Access-Control-Allow-Origin هنا.
لأنه، هذا العنوان معين غير موجود في القائمة البيضاء على موقع الملقم.
دعونا ننظر الآن إلى مثال على اختبار الطلب.
لذلك للقيام بذلك، في ساعي البريد، حدد خيارات هنا،
ثم دعونا نرسل طلب الاختبار المبدئي
إلى المضيف المحلي: 3443days.
وفي رأس سنقوم, وضع
الأصل كما هتبس: localhost3443.
ثم هذا إرسال هذا الطلب إلى الخادم.
وردا على طلب الخيارات هذا الذي أرسلته إلى الخادم،
ستلاحظ أنه في رسالة الرد سنقول 204 لا محتوى.
لا يوجد محتوى ليتم إرجاعه هنا.
ولكن، عندما تنظر إلى رؤوس رسالة الرد التي تأتي، لاحظ أن
لدينا Access-Control-Allow-Origin ليتم تعيينها على هذه القيمة.
لاحظ أيضًا أنه يحدد طرق Access-Control-Allow.
وهنا يحدد تلك الطرق التي سيكون الخادم على
استعداد لقبول في هذه النقطة النهاية.
لذلك أنت تخبر العميل قائلا أن
كل هذه الطرق مقبولة للخادم في نقطة النهاية المقابلة.
لذا، هذه هي الطريقة التي يمكننا بها إجراء اختبار مسبق للطلب.
عن طريق إرسال رسالة طلب الخيارات أولاً،
ثم استعادة المعلومات من الخادم هنا.
وكما تذكرون، هذا هو ما قمنا بتكوينه في
جزء الخيارات من كل نقطة من نقاط نهاية جهاز التوجيه.
لذلك هذا هو كيف يمكننا تكوين وحدة عقدة السيارات لدينا ومن
ثم تكوين الخادم لدينا للرد مع رسائل رأس مختلفة.
مع هذا نكمل هذا التمرين.
في هذا التمرين رأينا كيف يمكننا تكوين الخادم الخاص بنا لتكون قادرة على
إرسال مختلف الرؤوس ذات الصلة بالطبع في رسالة الرد
باستخدام وحدة عقدة الدورة.
مع هذا، نكمل هذا التمرين.
هذا هو الوقت المناسب بالنسبة لك للقيام بتعليق GIT مع دورة الرسالة.
[ موسيقى]