前へ

次へ

CORS を構成する

完了

API が作成されました。これで、フロントエンド Web アプリケーションに接続し、実際にこのプロジェクトの作業を確認する準備ができました。 ただし、これを行う前に、フロントエンド アプリケーションでそれを呼び出せることを API に通知する必要があります。 この接続は、"クロスオリジン リソース共有" (CORS) と呼ばれるものによって行われます。

ローカルの Azure Functions アプリの CORS 設定を変更する

API がリッスンするドメインとポートを指定できます。 メイン関数プロジェクト フォルダーにある local.settings.json ファイルの Host で、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 を見ることができます。

続行