CODEWITHSUNDEEP
azurecorsazure-functionsaxios
steverb
steverb

Reputation: 1575

CORS with Azure function from localhost (not CLI)

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?

Upvotes: 91

Views: 97473

Answers (9)

Andrei Kniazev
Andrei Kniazev

Reputation: 299

We had multiple CORS policies enabled and it didn't work. When we deleted every CORS policy and left only "*" (allow all) - it worked.

Upvotes: 0

HAL9000
HAL9000

Reputation: 3751

Please note that CORS policies should be activated on the server where the resource is hosted.

In my case, despite I was testing my API in local, I was accessing a resource on the real blob storage, where no CORS policy was set.

Activating the CORS policy on the blob storage solved the issue, in my case.

enter image description here

Upvotes: 1

user19504570
user19504570

Reputation: 71

You can enable the CORS from hosted environment in function app to add the web app URL refer the below screenshot.

Enable CORS in Function app

1

Note: TO allow all mark as "*"

Upvotes: 7

steverb
steverb

Reputation: 1575

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.

Elaboration For Production Environment Issues

I was having a problem on localhost, and on production (firebase hosted), trying to get my JavaScript Web app to interact with an Azure Function.

Cross-Origin Resource Sharing (CORS) allows JavaScript code running in a browser on an external host to interact with your backend.

In Azure Functions, click the features tab, and click the CORS block under "networking and security".

Add your domain as an allowed origin and hit save. This will fix the issue.

Upvotes: 38

Alex Mann
Alex Mann

Reputation: 316

I had the same issue and the culprit was actually a typo in the Blazor-embedded-URI which Firefox displayed as a CORS error. Solution was just to realize that it had nothing to do with CORS and fix the mis-typed URI.

Upvotes: 1

QauseenMZ
QauseenMZ

Reputation: 1251

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://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local?tabs=macos

Upvotes: 23

Neil
Neil

Reputation: 8584

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": "*"
  }
}

Upvotes: 53

Morten_564834
Morten_564834

Reputation: 1667

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

Upvotes: 15

Azadeh Khojandi
Azadeh Khojandi

Reputation: 4074

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://learn.microsoft.com/en-us/azure/azure-functions/functions-run-local

Upvotes: 146

Related Questions