CORS with Azure function from localhost (not CLI)

steverb picture steverb · May 3, 2017 · Viewed 21.8k times · Source

We are using axios in a vue.js app to access an Azure function. Right now we are getting this error:

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 response headers in the function this way:

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

Has anyone run across this error?

Answer

Azadeh Khojandi picture Azadeh Khojandi · Jan 3, 2018

To set CORS working locally when you are not using CLI and you are using Visual Studio/ VS Code - you need to add local.settings.json file into your project if it's not there.

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

local.settings.json settings

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

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

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

More info: https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local