web-dev-qa-db-ja.com

localhostからAzure関数を使用したCors（CLIではない）

Azure関数にアクセスするために、vue.jsアプリでaxiosを使用しています。現在、このエラーが発生しています：

No 'Access-Control-Allow-Origin' header is present on the requested resource. 
Origin 'http://localhost:8080' is therefore not allowed access.

この方法で関数に応答ヘッダーを設定しようとしています：

context.res = {
        body: response.data,
         headers: {   
          'Access-Control-Allow-Credentials': 'true',
          'Access-Control-Allow-Origin': 'http://localhost:8080',
          'Access-Control-Allow-Methods': 'GET',
          'Access-Control-Request-Headers': 'X-Custom-Header'
         }
      }

誰もこのエラーに遭遇しましたか？

azurecorsazure-functionsaxios
19
steverb

CLIを使用せず、Visual Studio/VS Codeを使用している場合にCORSをローカルで設定するには、local.settings.jsonファイルがプロジェクトにない場合はプロジェクトに追加する必要があります。

「出力に直接コピー」が「新しい場合にコピー」に設定されていることを確認してください

local.settings.json settings

次に、「local.settings.json」にCORS": "*" そのようです：

{
  "IsEncrypted": false,
  "Values": {

  },
  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*"
  }
}

詳細： https://docs.Microsoft.com/en-us/Azure/azure-functions/functions-run-local

34
Azadeh Khojandi

うまくいきました。 Azure機能の構成でした。 [プラットフォーム機能]、[CORS]の順に進みます。 http：// localhost：808 を「許可されたオリジン」のリストに追加すると、すべてが機能しました。

21
steverb