Cors Settings for Azure functions C# to interact with static website in Angular UX

Question

I have static angular website deployed in blob storage interacting with the backend API hosted on Function App C#. In local am able to interact with UX and API on localhost 4800 and 7071 by adding the Host Cors settings in local.settings.json. But when pushed my changes to Dev i get below error, also attached screenshot

"Access to XMLHttpRequest at <<API endpoint>> from origin <<dev website>> 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."

On Angular end added headers
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
and passing them in request.

On Function App, added CORS settings to "*"

Not sure if we need any settings in Function App end point level.. Appreciate your help @AzureSupport.

Answer 1

@srikanth sankabathula ,

Thanks for reaching out to Q&A.

The following settings that you have added already should resolve the CORS issue.

On Angular end added headers
'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept'
and passing them in request.

On Function App, added CORS settings to "*"

However you are still seeing the cors issue. At times I have observed that browsers show as a CORS errors request that are not failing due to CORS. Example:

Browser -> OPTIONS request -> valid response -> Browser performs the request as CORS check was valid-> failure -> Browser shows CORS errors

What you need to do is to check if OPTIONS request returned as expected and then if there was a consequent request to the actual endpoint (HttpTriggered function on this case), and then if that one ended properly or if this one failed.

One quick test that can be done for confirmation purposes is to call the API from any HTTP Client, like Postman, Fiddler… with the same parameters, headers as your Static applicatin is doing. That will remove CORS from the equation since CORS is something that browsers do but it’s not any requirement for the endpoint to work.

Also check the function invocation logs in the Monitor section to see if there are any timeouts occuring. Please note that http triggered function has a 230 seconds timeout.

I hope this helps!

Please 'Accept as answer' and ‘Upvote’ if it helped so that it can help others in the community looking for help on similar topics.