דוגמאות לתצורה של 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 או כותרת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>

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

משתמשים בהגדרה הזו אם יש לכם כמה סביבות פיתוח או סביבות ביניים שצריכות גישה לאותו מאגר. כשמציינים תת-דומיין, אפשר להשתמש בתו הכללי * כדי להתאים לכמה תת-דומיינים. לדוגמה, אפשר להשתמש ב-*.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>

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

משתמשים בהגדרה הזו לנתונים שגלויים לציבור, כשאין צורך בהגבלת הגישה. אם מציינים את התו הכללי לחיפוש * כמקור, בקשות מכל מקור יתקבלו. שימו לב: בהגדרה הזו, בקשות ל-bucket ייכשלו אם הלקוח יגדיר 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
    }
]

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