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?

Not sure what you mean. We are using Azure functions, so we don't configure the server. — steverb, May 03 '17 at 18:20
so the resource that you are requesting from Azure is not configured with this header "Access-Control-Allow-Origin". So for example, if that header was set by the server like this "Access-Control-Allow-Origin": www.google.com it would mean that that azure function allows request to come from google. — victor, May 03 '17 at 18:35
You should read about CORS requests. Basically, when the browser sees that the domains are different, it make a seperate call to the requested domain to get the "Access-Control-Allow-Origin" headers to see what external domains are allowed access to the server. If the domain you are requesting FROM is not listed in the headers, then the browser does not allow the request to proceed. — victor, May 03 '17 at 18:38
Have you tried enabling CORS via the [Function App Settings](https://learn.microsoft.com/en-us/azure/azure-functions/functions-how-to-use-azure-function-app-settings#cors)? — Pragna Gopa, May 03 '17 at 18:44

score 126 · Answer 1 · edited May 13 '18 at 19:42

126

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

edited May 13 '18 at 19:42

Johan Karlsson

494
5
7

answered Jan 02 '18 at 23:35

Azadeh Khojandi

3,806
1
30
32

13

This is not working. The default VS Azure Function template already has this file and CORS set to *. But if you try to access the localhost API from another website running localhost (but different port) it will not work. – Morten_564834 Dec 03 '19 at 05:47
2

This worked for me. Adding the CORS to local.settings.json fixed the network error I was getting in the browser. Removing the CORS and testing again caused the error to return. – Todd Smith May 03 '22 at 06:40
This doesn't work with function runtime v4 – Paul Smith Aug 23 '23 at 21:58

score 47 · Answer 2 · answered Feb 07 '20 at 08:19

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

score 38 · Answer 3 · edited Dec 16 '20 at 03:58

38

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.

edited Dec 16 '20 at 03:58

Matthew Rideout

7,330
2
42
61

answered May 03 '17 at 18:42

steverb

1,415
1
10
12

3

I'm not sure this is very safe. Anybody could be running an application hosted locally on port 8080. – MMalke Nov 12 '19 at 02:29
3

The question was about localhost. I got the same error and it's not even published to Azure yet. – Morten_564834 Dec 03 '19 at 05:48

score 16 · Answer 4 · answered Feb 19 '20 at 01:33

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

score 12 · Answer 5 · answered Dec 07 '19 at 08:59

12

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

answered Dec 07 '19 at 08:59

Morten_564834

1,479
3
15
26

1

You are super life saver – PrathapG Mar 25 '20 at 11:39
1

`--cors *` didn't work for me. However `--cors http://localhost:8080` did. Using Python Azure funcs v3. – Bobby Koteski Aug 14 '21 at 23:06

score 2 · Answer 6 · edited Aug 14 '22 at 14:08

2

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

Note: TO allow all mark as "*"

edited Aug 14 '22 at 14:08

vimuth

5,064
33
79
116

answered Aug 09 '22 at 07:11

user19504570

21
3

score 1 · Answer 7 · answered Nov 23 '20 at 05:21

1

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.

answered Nov 23 '20 at 05:21

Alex Mann

296
3
4

We also get very similar error in case the host is "not available". In my case the Azure Function Application was stopped and I got the following error message: `"origin 'https://REMOVED.core.windows.net' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: 'No Access-Control-Allow-Origin' header is present on the requested resource."` – minus one Feb 02 '22 at 10:23

score 1 · Answer 8 · answered Aug 15 '22 at 11:16

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.

score 0 · Answer 9 · answered May 08 '23 at 11:02

0

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

answered May 08 '23 at 11:02

Andrei Kniazev

103
2
8

CORS with Azure function from localhost (not CLI)

9 Answers9

Elaboration For Production Environment Issues

Linked

Related