הכותרת הכותרת בקרת גישה-אפשר-מקור מוסברת - עם דוגמת CORS

תִכנוּת

לעתים קרובות בעת קריאה ל- API, ייתכן שתראה שגיאה במסוף שלך שנראית כך:

 Access to fetch at '//somesite.com' from origin '//yoursite.com' has been blocked by CORS policy: The 'Access-Control-Allow-Origin' header has a value that is not equal to the supplied origin

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

מה Access-Control-Allow-Originהכותרת?

Access-Control-Allow-Originהוא כותרת CORS. CORS, או Cross Origin Resource Sharing, הוא מנגנון של דפדפנים לאפשר לאתר הפועל במקור A לבקש משאבים ממקור B.

מקור הוא לא רק שם המארח, אלא שילוב של יציאה, שם מארח ותכנית, כגון - //mysite.example.com:8080/

הנה דוגמה למקום בו זה נכנס לפעולה -

  1. יש לי מקור: //mysite.comואני רוצה לקבל משאבים ממקור B: //yoursite.com.
  2. כדי להגן על ביטחונך, הדפדפן לא יאפשר לי לגשת למשאבים מ- yourite.com ויחסום את בקשתי.
  3. על מנת לאפשר למקור A לגשת למשאבים שלך, המקור B שלך יצטרך ליידע את הדפדפן שזה בסדר שאקבל משאבים מהמוצא שלך.

הנה דוגמה מרשת המפתחים של Mozilla שמסבירה זאת ממש טוב:

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

ישנם כמה כותרות המאפשרות שיתוף של משאבים בין מקורות, אך העיקרי הוא Access-Control-Allow-Origin. זה אומר לדפדפן אילו מקורות רשאים לקבל בקשות משרת זה.

מי צריך להגדיר Access-Control-Allow-Origin?

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

אז למי יש את היכולת האולטימטיבית למנוע מאתר זדוני זה לגנוב את הנתונים שלך מהבנק? הבנק! לכן, הבנק יצטרך להגן על המשאבים שלו על ידי הגדרת Access-Control-Allow-Originהכותרת כחלק מהתגובה.

רק זכרו: המקור האחראי על הגשת המשאבים יצטרך להגדיר כותרת זו.

כיצד להשתמש ומתי להעביר כותרת זו

הנה דוגמה לערכים שתוכלו להגדיר:

  1. Access-Control-Allow-Origin : * : מאפשר כל מקור.
  2. Access-Control-Allow-Origin : //mysite.com : אפשר בקשות רק מ- mysite.com.

לראות את זה בפעולה

בואו נסתכל על דוגמא. אתה יכול לבדוק את הקוד הזה ברשימות GitHub שלי.

אנו הולכים לבנות שרת על מקור A //localhost:8000אשר ישלח מחרוזת Hellos apiלנקודת קצה. אנו הולכים להתקשר עם נקודת קצה זו על ידי יצירת לקוח על מקור B //localhost:3000ואז להשתמש באחזור כדי לבקש את המשאב. אנו מצפים לראות את המחרוזת Helloמועברת על ידי מקור A במסוף הדפדפן של מקור B.

נניח שיש לנו מקור //localhost:8000שמשרת את המשאב הזה /apiבנקודת הקצה. השרת שולח תגובה עם הכותרת Access-Control-Allow-Origin.

const express = require("express"); const app = express(); const port = process.env.SERVER_PORT || 8000; // Add Access Control Allow Origin headers app.use((req, res, next) => { res.setHeader("Access-Control-Allow-Origin", "//yoursite.com"); res.header( "Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept" ); next(); }); app.get("/api", (req, res) => { res.json("Hello"); }); app.listen(port, () => console.log(`Listening on port ${port}`));

בצד הלקוח, אתה יכול להתקשר לנקודת קצה זו על ידי התקשרות fetchכך:

fetch('//localhost:8000/api') .then(res => res.json()) .then(res => console.log(res));

כעת פתח את קונסולת הדפדפן שלך כדי לראות את התוצאה.

מכיוון שהכותרת מוגדרת כרגע לאפשר גישה רק ממנה //yoursite.com, הדפדפן יחסום את הגישה למשאב ותראה שגיאה במסוף שלך.

עכשיו, כדי לתקן את זה, שנה את הכותרות לזה:

 res.setHeader("Access-Control-Allow-Origin", "*");

בדוק את קונסולת הדפדפן ועכשיו תוכל לראות את המחרוזת Hello.

מעוניין בהדרכות נוספות ו- JSBytes ממני? הירשם לניוזלטר שלי.