טיפול ב-CORS - קורס NodeJS

תמלול ההרצאה: טיפול ב-CORS - קורס NodeJS

הטקסט המלא של הדקות הראשונות בהרצאה «טיפול ב-CORS - קורס NodeJS» בקורס הווידאו של PracticU – כתוביות בעברית עם זמן התחלה לכל פסקה. כך תוכלו לקרוא ולחפש את הנושאים לפני שמתחילים ללמוד.

1. 00:03

   אחרי שטיפלנו בכל מיני מצבים של שגיאות שיכולות להיות לנו בצד של השרת, בין אם זה שגיאת 404, שגיאת 500, שגיאת 400, יש עוד מקרה אחד של שגיאה שהייתי רוצה לטפל בה בסדרת סרטונים הזאת, אבל זאת שגיאה שתתבצע אצל הלקוח ולא אצל השרת, והשרת צריך למנוע את השגיאה הזאת אצל הלקוח.

2. 00:29

   סוג של השגיאה הזאת נקרא או המונח נקרא קורס שזה קיצור של קורס אוריג'ן ריסורס שיירינג ותכף אנחנו נבין בדיוק מה השגיאה ממה היא נובעת ואיך אנחנו מטפלים בה לצורך כך אנחנו צריכים לבנות לעצמנו איזה שהוא לקוח אז אנחנו ראשית הולכים לבנות את הלקוח שהוא חלק מהמערכת שלנו מה זאת אומרת?

3. 00:59

   נניח שאנחנו בונים את כל ה-Restful Service הזה בשביל שהוא ישרת אתר שלנו. אז אנחנו בונים גם את השרת וגם את הלקוח, ומן הסתם יש לנו איזושהי כתובת אחת ויחידה שבה הלקוח יגלוש, ובכתובת הזאת הוא גם יקבל את הדפים של הלקוח וגם השרת יעבוד על אותה כתובת.

4. 01:23

   זה המצב הראשון שאני רוצה להדגים. המצב השני יהיה כתובת אחרת לגמרי אבל תכף אטפל בה. אז לצורך כך בואו נוסיף כאן בפרויקט שלנו איזושהי תיקייה שנקרא לה client נניח ובתוכה נוסיף איזשהו קובץ שנקרא index.html ויש לנו כאן אפשרות שוויז'ל סטודיו תבנה לנו מיידית את הקובץ הזה וכאן אני רוצה לבנות איזשהו לחצן, בטון get all products אנחנו רוצים סך הכל

5. 01:54

   לעשות את הדבר הכי פשוט לגלוש לשרת ולקבל את כל המוצרים. ראשית, איך אני בכלל יכול לגלוש לכתובת הזאת או לדף הזה ולקבל אותו? אם אני מסתכל, אני רואה שכשאני מריץ את האתר, בואו נריץ אותו עם Node App, אז האתר רץ על כתובת HTTP/Localhost 3000 כי זה מה שהגדרנו באפ.

6. 02:16

   אם אנחנו רוצים שגם הדף הזה יונגש על אותה כתובת, אנחנו צריכים להוסיף כאן באפ איזושהי פקודת use. בואו נוסיף אותה כאן.

7. 02:31

   Server use, express static, ניתן לה את ה-dir name, משורשר עם תיקיית פליינט. מה זאת הפקודה הזאת?

8. 02:45

   express static זה פשוט פקודה שמנגישה קובץ html, כי קובץ html נחשב static. זה המיקום שלו ואם לא תיארנו בדיוק איזה קובץ זה אז אוטומטית המערכת תחפש קובץ שנקרא index.html אז המידלוור הזה use אומר שאוטומטית אם היוזר גולש לכתובת הראשית אז יונגש לו קובץ הindex.html שנמצא בתיקיית

9. 03:13

   קליינט שתיקיית קליינט נמצאת ברוט דירקטורי זאת בעצם הפקודה אז אם אני עכשיו מרחף קליק קונטרול וקליק הלינק הזה אז אני רואה שהוא כותב לי ראוט נוט פאונד זה לא מה שאנחנו רוצים בואו ננסה רגע לעצור להריץ שוב בואו ננסה לראות אולי עכשיו או פשוט היינו צריכים לעצור ולהריץ שוב פעם אז הנה

10. 03:36

    יש לנו פה את הקליינט שלנו ואנחנו רואים שכשאנחנו נמצאים בנתיב הראשי הוא מנגיש לנו את האינדקס. הלחצן כמובן לא עושה שום דבר בואו נחזור ונוסיף כאן קובץ, נקרא לו Index.js וזה ה-JavaScript של הקליינט.

11. 04:00

    נבוא לפה ונגיד שיש לנו גישה לקובץ הזה, Index.js, בתוך הקובץ בואו נבנה כאן איזושהי פונקציה, Get All Products שמבצעת Alert Test, נקרא לפונקציה מפה, קליק get all products ואפילו אני לא חושב שאני צריך לעצור את האתר רק לרפרש אותו ואנחנו רואים שהוא פשוט מצליח לקרוא לפונקציה.

12. 04:34

    עד כאן הכל בסדר. מה אנחנו רוצים לעשות בתוך הפונקציה? בתוך הפונקציה אני אפטר רגע מה alert test. מה שאנחנו רוצים לעשות זה לגלוש לשרת שבנינו שהוא כרגע רץ כבר ולהביא משם את אוסף המוצרים ולהציג אותם.

13. 04:49

    אז יש לנו פקודה שנקראת Fetch, זאת פקודה ששייכת לג'אווה סקריפט אבל היא שייכת לג'אווה סקריפט בצד הדפדפן.

14. 04:57

    Fetch אומרת לי, תגיד לאן אתה רוצה שאני אגלוש? בואו נגלוש ל-HTTP, Localhost 3000, שם יש לנו API/Products והפקודה הזאת מחזירה פרומיס שאני צריך לחלץ ממנו את המוצרים.

15. 05:14

    לכן בואו נבנה פה const response כי הוא מחזיר לי איזשהו רספונס מסוים, נהפוך את הפונקציה הזאת לאסינק ונקרא לה על ידי ה-wait כי היא אסינכרונית.

16. 05:27

    אחרי שעשינו את זה אנחנו רוצים לחלץ את המוצרים מהרספונס, זה מתבצע על ידי עוד פרומיס שנמצא ברספונס נקודת json.

17. 05:39

    הוא גם הופך אותו ל-json וגם מחלץ את המוצרים עצמם, ואלה פקודות של javascript בצד לקוח client side.

18. 05:47

    אחרי שיש לנו את המוצרים אנחנו יכולים עכשיו לבנות קטע html היא שפשוט יוצר איזושהי תגית html ומציג אותה. בואו נעשה פה איזה תגית unordered list כזאת UL, הנה יש לנו תגית UL, בואו נרוץ בלולאה על כל המוצרים ולכל UL נשרשר תגית list item שיש בה את השם של המוצר, נשרשר איזשהו חצי ימינה, זה איזשהו סימן שנקרא right arrow,

19. 06:21

    הסימן הזה זה פשוט יהיה חץ ימינה, ואז נשרשר את ה-price. האמת שבואו נוסיף פה גם את הסימן דולר, ואז יהיה לנו פרייס עם דולר כזה, ולבסוף אנחנו סוגרים את li, וכל זה זה פריט אחד ב-unordered list שלנו.

20. 06:42

    בסיום הלולאה ה-unordered list הולכת להיות משורשרת עם, כמובן, סגירה של UnorderedList ואז אנחנו יכולים ללכת ל-DocumentBodyInnerHTML ולשרשר אליו את ה-UnorderedList.

21. 07:00

    נניח משהו מאוד מאוד סימפל שמאפשר להוסיף לתוכו את כל המוצרים. אז הנה יש לנו פה קטע קוד שגולש באג'אקס, הדבר הזה זה גלישת אג'אקס לשרת שלנו, הוא מחזיר לנו את המוצרים ונציג אותם. בואו נבדוק את זה.

22. 07:15

    כל מה שאנחנו צריכים לעשות זה לחזור לרפרש ולמעשה מה שאני רוצה לעשות זה לפתוח את הקונסול ולראות גם אם יש לי איזושהי שגיאה. אני מריץ, אין לי שום שגיאה בקונסול, אני רואה שהייתה לי פה גלישת אדג'אקס, אני רואה את השם של המוצר, הנה החצי ימינה שהיה לנו והנה הדולר עם המחיר עצמו.

23. 07:38

    כל המוצרים נמצאים, הכל עובד כמו שצריך. אז אנחנו רואים כביכול שלא הייתה לנו פה שום בעיה לבנות אתר אינטרנט שנמצא, שימו לב, האתר הזה נמצא בכתובת של השרת שלנו, ושהוא גולש ב-Ajax לכתובת של השרת שלנו.

24. 07:59

    אם אני נמצא בכתובת מסוימת, שזה כמובן כולל הפורט, ואני גולש ב-Ajax לאתר שנמצא באותה כתובת, הדבר הזה נקרא same origin. origin זה המקור ממנו הגיע האתר אינטרנט, והאתר אינטרנט שלנו, או ליתר דיוק הדף שלנו, הגיע מאותו המקור שאליו אני גולש כרגע ב-AJAX.

25. 08:23

    הדף שלנו, האינדקס html, הגיע מ-localhost 3000. אנחנו גולשים ב-AJAX ל-localhost 3000. אז אם אני גולש ב-AJAX ל-same origin, הדפדפן עצמו מאשר ואומר לי: תשמע, אני רואה שאתה רוצה לגלוש לשרת שממנו אתה באת, אני מאשר לך, אין שום בעיה, אני גולש לשרת ומחזיר לך את הדף הזה, הכל בסדר.

26. 08:53

    אבל הבעיה היא מה קורה אם אנחנו נמצאים באתר האחר, שהאתר האחר הוא לא אותה כתובת של השרת. וברגע שזה קורה, זה לא נחשב same origin, זה נקרא cross origin, בדיוק כמו שהבעיה שאנחנו הולכים לראות, Cross or Reject זה מצב שבו אתר עם כתובת אחרת רוצה לגלוש לשרת שלנו שכמובן נמצא בכתובת אחרת מהאתר הזה.

27. 09:23

    אז בשביל להצליח לראות את זה בואו ניגש לכאן ויש לנו פה אתר שבניתי שבנוי באנגולר ולמעשה האתר הזה הוא ריק לגמרי ואני פותח אותו כרגע בוויז'ואל סטודיו גרסה אחרת לגמרי מהוויז'ל סטודיו שלנו ואני רוצה להוסיף לו איזשהו קטע קוד שמבצע בדיוק אותו דבר.

28. 09:47

    אנגולר, יש לנו כאן איזושהי קלאס של איזשהו רכיב מסוים ויש לנו את ה-HTML שלו. קלאס היא די ריקה, ה-HTML הוא ריק ואני רוצה לבצע קוד דומה לקוד שביצעתי מקודם.

29. 10:02

    אבל כאשר אנחנו נריץ את האתר הזה אז הוא ירוץ על כתובת אחרת כי הוא אתר נפרד לגמרי. אז ראשית, בואו נבנה כאן איזושהי פונקציה, נעשה אותה כפאבליק ונקרא לה get all products.

30. 10:17

    נהפוך אותה ל-sync ואנחנו רוצים לבצע פה קוד דומה לקוד שביצענו מקודם. בואו נחזור לכאן. אז יש לנו את שני החבר'ה האלה, בואו נעתיק אותם, קונטרול סי ונדביק אותם.

31. 10:34

    ראשית אנחנו מבצעים fetch לכתובת הזאת, זאת אותה כתובת, זה לא יהיה same origin, זה יהיה Cross-Origin כי אנחנו הולכים לראות שכשאנחנו נריץ את האתר הזה אנחנו נהיה בכתובת אחרת לגמרי.

32. 10:47

    Cross-Origin ואני לא רוצה לשים את המוצרים כאן, אני רוצה לשים אותם באזור הגלובלי, ככה זה עובד באנגולר. בואו ניקח כאן Public Products וניגש ל-This Products ופשוט נשים פה למעלה את המוצרים.

33. 11:05

    זה כל מה שהפונקציה הזאת עושה. היא גולשת לאתר שהכתובת שלו היא אחרת לגמרי, שאנחנו כמובן בנינו אותו, מביאה ריספונס, מחלצת את המוצרים, ושמו את המוצרים באזור הגלובלי.

34. 11:17

    כאשר אנחנו נמצאים ב-HTML, ה-HTML מחולק פה לאזור הזה, אנחנו רוצים ב-HTML לבנות לחצן, get all products, יש לו קליק, ככה זה נבנה באנגולר, שפונה לפונקציה get all products, וכאן אנחנו בונים unordered list שנמצא פה, וה-unordered list הזה מכיל list item שיש