Cors with Azure function from localhost (not CLI)

We use axios in the vue.js application to access the Azure function. We are getting this error right now:

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

We are trying to set the response headers in the function as follows:

 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' } } 

Does anyone encounter this error?

+7
cors axios azure azure-functions
source share
2 answers

We are working. This was the configuration in our Azure feature. You go to Platform Features, then CORS. We added http: // localhost: 8080 to the Allowed Origin list, and then it worked.

+8
source share

To install CORSs that work locally when you are not using the CLI and using Visual Studio / VS Code, you need to add the local.settings.json file to your project if it is not there.

Make sure "Copy to output directly" is set to "copy if newer"

local.settings.json settings

Then in your "local.settings.json" you can add CORS": "*" following settings

  { "IsEncrypted": false, "Values": { }, "Host": { "LocalHttpPort": 7071, "CORS": "*" } } 

Additional information: https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local

+1
source share

All Articles