Share via

設定跨原始來源資源共用 (CORS)

  • 發行項

適用於：NoSQL

跨原始來源資源共用 (CORS) 是一項 HTTP 功能，使在一個網域下執行的 Web 應用程式能夠存取另一個網域中的資源。 網頁瀏覽器會實作稱為相同來源原則的安全性限制，讓網頁無法呼叫另一個網域中的 API。 不過，CORS 提供了安全的方式來允許來源網域呼叫其他網域中的 API。 Azure Cosmos DB 中的 API for NoSQL 現在可使用“allowedOrigins” 標頭支援跨原始來源資源共用 (CORS)。 在為 Azure Cosmos DB 帳戶啟用 CORS 支援後，就只會對已通過驗證的要求進行評估，以根據您指定的規則來判斷是否允許這些要求。

您可以從 Azure 入口網站或 Azure Resource Manager 範本設定跨原始來源資源共用 (CORS) 設定。 針對使用 API for NoSQL 的 Azure Cosmos DB 帳戶，Azure Cosmos DB 支援在 Node.js 和瀏覽器型環境中均可運作的 JavaScript 程式庫。 使用閘道模式時，此程式庫現在可利用 CORS 支援。 不需要設定用戶端就能使用此功能。 使用 CORS 支援後，來自瀏覽器的資源就可以透過 JavaScript 程式庫或直接從 REST API 直接存取 Azure Cosmos DB 以進行簡單的作業。

注意

CORS 支援僅適用於 Azure Cosmos DB for NoSQL 且獲其支援。 並不適用於適用於 Cassandra、Gremlin 或 MongoDB 的 Azure Cosmos DB API，因為這些通訊協定不會使用 HTTP 進行用戶端-伺服器通訊。

從 Azure 入口網站啟用 CORS 支援

遵循下列步驟，透過 Azure 入口網站來啟用跨原始來源資源共用：

  1. 瀏覽至 Azure Cosmos DB 帳戶。 開啟 [CORS] 頁面。

  2. 指定可對您 Azure Cosmos DB 帳戶發出跨原始來源呼叫的原始來源逗號分隔清單。 例如，https://www.mydomain.com、https://mydomain.com、https://api.mydomain.com。 您也可以使用萬用字元 “*” 來允許所有原始來源，然後選取 [提交]。

    注意

    目前，您不能在網域名稱中使用萬用字元。 例如，尚未支援 https://*.mydomain.net 格式。

    Enable cross origin resource sharing using Azure portal

從 Resource Manager 範本啟用 CORS 支援

若要使用 Resource Manager 範本來啟用 CORS，請在任何現有範本中新增 “cors” 區段與 “allowedOrigins” 屬性。 此 JSON 是某個範本的範例，其會建立新的 Azure Cosmos DB 帳戶並啟用 CORS。

{
  "type": "Microsoft.DocumentDB/databaseAccounts",
  "name": "[variables('accountName')]",
  "apiVersion": "2019-08-01",
  "location": "[parameters('location')]",
  "kind": "GlobalDocumentDB",
  "properties": {
    "consistencyPolicy": "[variables('consistencyPolicy')[parameters('defaultConsistencyLevel')]]",
    "locations": "[variables('locations')]",
    "databaseAccountOfferType": "Standard",
    "cors": [
      {
        "allowedOrigins": "https://contoso.com"
      }
    ]
  }
}

從瀏覽器使用 Azure Cosmos DB JavaScript 程式庫

Azure Cosmos DB JavaScript 程式庫目前只在其套件內隨附 CommonJS 版本的程式庫。 若要從瀏覽器使用此程式庫，您必須使用 Rollup 或 Webpack 等工具來建立瀏覽器相容程式庫。 某些 Node.js 程式庫應該會有對其適用的瀏覽器模擬。 此為具有所需模擬設定的 Webpack 組態檔範例。

const path = require("path");

module.exports = {
  entry: "./src/index.ts",
  devtool: "inline-source-map",
  node: {
    net: "mock",
    tls: "mock"
  },
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist")
  }
};

以下是程式碼範例，會使用 TypeScript 和 Webpack 搭配 Azure Cosmos DB JavaScript SDK 程式庫。 此範例會建置 Todo 應用程式，以在建立新項目時傳送即時更新。

最佳做法是不要使用主索引鍵，從瀏覽器中與 Azure Cosmos DB 通訊。 相反地，請使用資源權杖來進行通訊。 如需資源權杖的詳細資訊，請參閱保護對 Azure Cosmos DB 的存取一文。

下一步

若要了解其他保護 Azure Cosmos DB 帳戶的方式，請參閱下列文章：