דוגמאות לתצורה של 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 תמיד מפעילות בדיקה מקדימה.

‫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'
  }
});

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

השתמשו בהגדרה הזו אם האפליקציה שולחת טוקן למוכ"ז או כותרתGoogle 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, צריך להסיר את ה-wrapper ברמה העליונה "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
    }
]

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