設定 CORS

  • 3 分鐘

已建立 API，而且您已準備好連線前端 Web 應用程式，並實際觀察此專案運作。 但在這麼做之前，您必須告訴 API，其可以由前端應用程式呼叫。 此連線透過所謂的「跨原始來源資源共用」(簡稱 CORS) 來完成。

修改本機 Azure Functions 應用程式的 CORS 設定

您可以指定 API 接聽的網域和連接埠。 在 main 函式專案資料夾內的 local.settings.json 檔案中，在 [主機] 底下指定 CORS 屬性。 local.settings.json 檔案與儲存資料庫連接字串的檔案相同。

在開發環境中通常會將 CORS 值設定為 "*"。 "*" 表示每個人和其寵物 (雖然寵物通常沒辦法打字) 都能存取此 API。 CORS 只是您在生產環境中所需的一個設定，因此在開發期間基本上會將其關閉。

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
    "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "CONNECTION_STRING": "AccountEndpoint=https://tailwind-traders-2778.documents.azure.com..."
  },
  "Host": {
    "CORS": "*"
  }
}

警告

CORS 設定的 * 萬用字元適用於開發，但在實際執行環境中很危險。 在以部署 Azure Functions 應用程式中設定 CORS 時，如果將此 API 部署到生產環境，應將應用程式設定變更為前端應用程式 URL。

您是聰明機智的開發人員 (Tailwind Traders 有您這樣的員工何其幸運)，會將 API 設定為允許在開發期間進行存取。 現在，您可以啟動前端，並查看 Products Manager 應用程式的所有功能。