דוגמאות לתצורה של CORS

סקירה כללית הגדרה

בדף הזה מוצגות הגדרות לדוגמה של שיתוף משאבים בין מקורות (CORS).

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

כדאי לעיין במקורות המידע הנוספים הבאים:

הגדרות CORS בסיסיות

נניח שיש לכם אתר דינמי שהמשתמשים יכולים לגשת אליו בכתובת your-example-website.appspot.com. יש לכם קובץ תמונה שמתארח בקטגוריה של Cloud Storage בשם your-example-bucket. כדי להשתמש בתמונה באתר, צריך להחיל על your-example-bucket הגדרות CORS שמאפשרת לדפדפנים של המשתמשים לבקש משאבים מהקטגוריה. על סמך ההגדרות הבאות, בקשות קדם-ההפעלה תקפות למשך שעה, ובקשות שבוצעו ללא שגיאות בדפדפן מחזירות את הערך Content-Type של המשאב בתגובה.

‫API בפורמט JSON

{
  "cors": [
    {
      "origin": ["https://your-example-website.appspot.com"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
  ]
}

‫API בפורמט XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://your-example-website.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

העלאות ישירות של קבצים (לאפליקציות בדף יחיד)

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

שימו לב: בקשות PUT תמיד מפעילות בדיקת Preflight.

‫API בפורמט JSON

{
 "cors": [
    {
        "origin": ["https://www.example-website.appspot.com"],
        "method": ["PUT", "POST", "OPTIONS"],
        "responseHeader": ["Content-Type", "x-goog-resumable"],
        "maxAgeSeconds": 3600
      }
  ]
}

‫API בפורמט XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://your-example-website.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>PUT</Method>
      <Method>POST</Method>
      <Method>OPTIONS</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
      <ResponseHeader>x-goog-resumable</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

דוגמת קוד בצד הלקוח

JavaScript

// Uploading a file using a Signed URL or direct PUT
await fetch(gcsSignedUrl, {
  method: 'PUT',
  body: fileBlob,
  headers: {
    'Content-Type': 'application/pdf'
  }
});

גישה מאומתת לנתונים

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

‫API בפורמט JSON

{
 "cors": [
    {
        "origin": ["https://www.example-secure-app.appspot.com"],
        "method": ["GET", "HEAD"],
        "responseHeader": ["Authorization", "Content-Type"],
        "maxAgeSeconds": 3600
      }
  ]
}

‫API בפורמט XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://www.example-secure-app.appspot.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
      <Method>HEAD</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Authorization</ResponseHeader>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

מתן גישה למספר תת-דומיינים תואמים

משתמשים בהגדרה הזו אם יש לכם כמה סביבות פיתוח או סביבות staging שצריכות גישה לאותו מאגר. כשמציינים תת-דומיין, אפשר להשתמש בתו הכללי * כדי להתאים לכמה תת-דומיינים. לדוגמה, אפשר להשתמש ב-*.example.com כדי להתאים בין test.example.com לבין prod.example.com.

‫API בפורמט JSON

{
 "cors": [
    {
        "origin": ["https://*.example.com"],
        "method": ["GET", "POST", "OPTIONS"],
        "responseHeader": ["Content-Type", "x-goog-resumable"],
        "maxAgeSeconds": 3600
      }
  ]
}

‫API בפורמט XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>https://*.example.com</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
      <Method>POST</Method>
      <Method>OPTIONS</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
      <ResponseHeader>x-goog-resumable</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>3600</MaxAgeSec>
  </Cors>
</CorsConfig>

מתן גישה לכל גרסת מקור

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

‫API בפורמט JSON

{
 "cors": [
    {
        "origin": ["*"],
        "method": ["GET"],
        "responseHeader": ["Content-Type"],
        "maxAgeSeconds": 1800
      }
  ]
}

‫API בפורמט XML

<?xml version="1.0" encoding="UTF-8"?>
<CorsConfig>
  <Cors>
    <Origins>
      <Origin>*</Origin>
    </Origins>
    <Methods>
      <Method>GET</Method>
    </Methods>
    <ResponseHeaders>
      <ResponseHeader>Content-Type</ResponseHeader>
    </ResponseHeaders>
    <MaxAgeSec>1800</MaxAgeSec>
  </Cors>
</CorsConfig>

מבנה הגדרות ה-CORS ב-CLI של gcloud

הפקודה gcloud storage buckets update --cors-file מצפה לקובץ שמכיל רק את רשימת כללי ה-CORS. כשמציינים הגדרות CORS שרוצים להגדיר באמצעות Google Cloud CLI, צריך להסיר את העטיפה "cors": ברמה העליונה מקובץ ה-JSON.

לדוגמה, הפקודה הבאה ב-CLI של gcloud קובעת הגדרות CORS בקטגוריה:

gcloud storage buckets update gs://example_bucket --cors-file=example_cors_file.json

זוהי דוגמה להגדרה של example_cors_file.json שמשתמשת במבנה הנכון לפקודה gcloud storage buckets update --cors-file.

[
    {
      "origin": ["https://your-example-website.appspot.com"],
      "method": ["GET"],
      "responseHeader": ["Content-Type"],
      "maxAgeSeconds": 3600
    }
]

המאמרים הבאים