分享方式：

設定 Azure 容器應用程式的跨原始來源資源共用 (CORS)

  • 文章

根據預設，透過瀏覽器向與不符合頁面來源網域發出的網域要求將遭到封鎖。 為避免部署至容器應用程式的服務有此限制，您可以啟用 CORS。

本文說明如何在容器應用程式中啟用和設定 CORS。

啟用 CORS 時，您可以進行下列設定：

設定 說明
允許認證 指出是否要傳回 Access-Control-Allow-Credentials 標頭。
存留期上限 設定 Access-Control-Max-Age 回應標頭，以指出可以快取 CORS 正式發行前小眾測試要求的結果多久時間 (以秒為單位)。
允許的原始來源 允許跨原始來源要求的來源清單 (例如，https://www.contoso.com)。 控制 Access-Control-Allow-Origin 回應標頭。 使用 * 以允許全部。
允許的方法 跨原始來源要求中允許的 HTTP 要求方法清單。 控制 Access-Control-Allow-Methods 回應標頭。 使用 * 以允許全部。
允許的標題 跨原始來源要求中允許的標頭清單。 控制 Access-Control-Allow-Headers 回應標頭。 使用 * 以允許全部。
公開標頭 根據預設，並非所有回應標頭都會在跨原始來源要求中公開給用戶端 JavaScript 程式碼。 公開的標頭是可以包含在回應中的額外標頭伺服器。 控制 Access-Control-Expose-Headers 回應標頭。 使用 * 來公開全部。
屬性 說明 類型
allowCredentials 指出是否要傳回 Access-Control-Allow-Credentials 標頭。 boolean
maxAge 設定 Access-Control-Max-Age 回應標頭，以指出可以快取 CORS 正式發行前小眾測試要求的結果多久時間 (以秒為單位)。 整數
allowedOrigins 允許跨原始來源要求的來源清單 (例如，https://www.contoso.com)。 控制 Access-Control-Allow-Origin 回應標頭。 使用 * 以允許全部。 字串陣列
allowedMethods 跨原始來源要求中允許的 HTTP 要求方法清單。 控制 Access-Control-Allow-Methods 回應標頭。 使用 * 以允許全部。 字串陣列
allowedHeaders 跨原始來源要求中允許的標頭清單。 控制 Access-Control-Allow-Headers 回應標頭。 使用 * 以允許全部。 字串陣列
exposeHeaders 根據預設，並非所有回應標頭都會在跨原始來源要求中公開給用戶端 JavaScript 程式碼。 公開的標頭是可以包含在回應中的額外標頭伺服器。 控制 Access-Control-Expose-Headers 回應標頭。 使用 * 來公開全部。 字串陣列

如需詳細資訊，請參閱 Web 超文字應用程式技術工作組 (WHATWG) 有關來自擷取要求的有效 HTTP 回應的參考。

啟用及設定 CORS

  1. 在 Azure 入口網站中，移至您的容器應用程式。

  2. 在 [設定] 選單下，選取 [CORS]。

    Screenshot showing how to enable CORS in the Azure portal.

啟用 CORS 後，您可以新增、編輯和刪除允許的原始來源、允許的方法、允許的標頭，以及公開標頭的值。

若要允許方法、標頭或來源的任何可接受的值，請輸入 * 作為值。

注意

透過命令列更新組態設定會覆寫目前的設定。 請務必將目前的設定併入您想要設定的任何新 CORS 值，以確保您的組態保持一致。

下列程式碼代表您在設定容器應用程式時，CORS 設定在 ARM 範本中採用的格式。

{ 
  ... 
  "properties": { 
      ... 
      "configuration": { 
         ... 
          "ingress": { 
              ... 
              "corsPolicy": { 
                "allowCredentials": true,
                "maxAge": 5000,
                "allowedOrigins": ["https://example.com"], 
                "allowedMethods": ["GET","POST"], 
                "allowedHeaders": [], 
                "exposeHeaders": []
              } 
          } 
      } 
  } 
}

下一步

設定輸入