演習 - CORS を構成する

  • 3 分

この演習では、ローカルの Azure Functions 内でクロスオリジン リソース共有 (CORS) を構成し、Product Manager アプリケーションが有効になるのを確認します。

CORS を構成する

  1. api/local.settings.json ファイルを開きます。

  2. "Values" プロパティの "下" に、"Host" セクションを追加します。 "Host" の "CORS" 値を "*" に設定します。

    {
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node",
     "AzureWebJobsFeatureFlags": "EnableWorkerIndexing",
    "CONNECTION_STRING": "PASTE YOUR CONNECTION STRING HERE"
  },
  "Host": {
    "CORS": "*"
  }
}

  3. API が引き続き実行されている場合は、デバッグ バーの [切断] を選択してプロセスを再起動してから、F5 キーを押して再び開始します。

フロントエンド アプリをチェックする

  1. フロントエンド アプリは、ポート 5000 のブラウザー タブでまだ実行されているはずです。 ページを更新します。

  2. アプリに API からデータが読み込まれます。

    データが入力されていることを示す Products Manager アプリケーションを表示する Web ブラウザーのスクリーンショット。

  3. すべてのエンドポイントが確実に動作するようにするために、製品を作成、更新、削除してみます。

このアプリは良好なようです。 とても良好です。 優れた API がないと、いずれも実行できません。 では、学習した内容をテストしてみましょう。