Cors with Azure function from localhost (not CLI)

Question

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 1

Had same problem. On root of backend project, there's a file local.settings.json.

Added "CORS": "*" and "CORSCredentials": false in that file (following is the example), did mvn clean package -DskipTests=true on root, and mvn azure-functions:run -DenableDebug on the azure function directory.

{
  "IsEncrypted": false,
  "Values": {
    "FUNCTIONS_WORKER_RUNTIME": "<language worker>",
    "AzureWebJobsStorage": "<connection-string>",
    "AzureWebJobsDashboard": "<connection-string>",
    "MyBindingConnection": "<binding-connection-string>"
  },
  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*",
    "CORSCredentials": false
  },
  "ConnectionStrings": {
    "SQLConnectionString": "<sqlclient-connection-string>"
  }
}

Reference:

https://docs.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=macos

Answer 2

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"

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

Answer 3

For v3+ the following works:

p.s. note that location of Hosts is on the same level as Values and not under it (as in the answer by azadeh-khojandi https://stackoverflow.com/a/48069299/2705777)

Configure CORS in the local settings file local.settings.json:

{
  "Values": {
  },
  "Host": {
    "CORS": "*"
  }
}

Answer 4

For those of you who are doing all of the above, but still not getting anything to work, it could be that your local.settings.json file is completely ignored. I don't know if this is because I'm using v3.

Go to Properties of your Project -> Debug -> Application arguments ->

host start --build --port 7071 --cors * --pause-on-error

Start your application

Answer 5

We got it working. It was a configuration in our Azure function. You go to "Platform Features" then "CORS". We added http://localhost:8080 to the list of "Allowed Origins" and then everything worked.