Skip to content
Skip to content
Menu
A cup of dev
  • Home
  • About
  • Ink and yarn
  • Contact
A cup of dev

How to solve CORS issues when running an Azure function locally

By Eli H. Schei on Monday, 8 May 2023, 7:00Wednesday, 13 November 2024, 10:47

This is one of those things that you keep running into when working with Azure functions. And maybe just enough time have passed since the last time, so its a question of “how did I fix this again?”. To save myself (and hopefully you) some time in the future – here is a tiny blogpost with the solution.

If you’re new to the magic lands of development you might not know what CORS is, so I’ll add a short explanation. If you just want to run your azure function locally without issues you can jump straigt to the solution.

What is CORS and why do we need it?

Cross-Origin Resource Sharing, or CORS for short, is a mechanism that allows a server to say which origins are allowed to ask for resources. You can read more about the technical details it in the mdn web docs. This is a topic large enough to require its own blogpost to cover all the details – so for now I’ll just give you an overview.

On the one side you have a SPfx webpart that lives on a sharepoint site “yourdomain.sharepoint.com”. And on the other side you have an azure function that lives in your azure environment.

Our browsers enforce the principle of “same origin policy”, so as long as your app is living on the web – your browser will stop it from talking to you function if its not configured to allow a request from your app. When your azure function is deployed to azure you can configure the CORS settings of the functional app where the function lives. But as long as it is running locally your app wont be allowed to talk to it – unless you run your app locally too.

If you try you will get a response that looks something like:

Access to fetch at ‘http://localhost:7071/yourFunction' from origin ‘https://yourdomain.sharepoint.com' has been blocked by CORS policy: No ‘Access-Control-Allow-Origin’ header is present on the requested resource. If an opaque response serves your needs, set the request’s mode to ‘no-cors’ to fetch the resource with CORS disabled.

Solution – add a host section to your local.settings.json file

Open up your local.settings.json file. As you can see in the image below this file does not contain much ‘out of the box’.

What you need to to is add a host section with portnumber and CORS, like in the snippet below:

{
  "IsEncrypted": false,
  "Values": {
    "AzureWebJobsStorage": "",
    "FUNCTIONS_WORKER_RUNTIME": "node"
  },
  "Host": {
    "LocalHttpPort": 7071,
    "CORS": "*"
  }
}

Restart your function and you should now be able to call it from your app without getting CORS issues.


If you are interested in Azure functions you might also like my other blogposts in this category.

Also, if you have any feedback or questions, please let me know in the comments below. 🙂

Thank you for reading, and happy coding!

/Eli

If you want to support my content you can

Share this:

  • Twitter
  • Facebook

Post navigation

An introduction to version control using git and GitHub
Create an azure function for authentication with Microsoft Authentication Library (MSAL), using node and TypeScript

Leave a ReplyCancel reply

Eli H. Schei

I'm a front-end developer who mainly work in the Microsoft 365-sphere. As a developer I read a lot of blogs. And in my experience I can read multiple different blogposts about exactly the same topic, and only one of them makes sense to me. Therefore I’m adding my voice to the mix, and hopefully one of my blogposts will be the one that makes sense of a topic for you. You can learn more about me here.

Recent Posts

  • Give your app granular permissions to a specific site or list in SharePoint
  • Microsoft Graph Magic: Simplifying User Removal from teams in Microsoft Teams
  • How to leverage teams-js in your Teams app; Working with user context and SharePoint site context
  • Building a ‘My Tools’ Web Part for SharePoint: Using SPfx and PnPjs
  • My top 3 most read blogpost of 2023

Categories

  • Azure
    • Azure functions
  • Level
    • Beginner
    • Intermediate
  • Microsoft 365 Development
    • Microsoft Authentication Library
    • Microsoft Graph
    • Microsoft Teams
    • PNP powershell
    • PowerApps
      • PowerApps Component Framework
    • SharePoint Framework
    • SharePoint Online
  • Tech Lead
  • Web development
    • Accessibility
    • Soft skills
    • Tips and tricks

Tags

accessibility app permissions ARIA azure Azure CLI azure functions Content creation custom themes favorites git github M365 CLI M365 development MS Graph PCF PnPjs PnP powershell power apps PowerApps Component Framework quicktip react resources SharePoint Online Sideloading SPfx Teams teams app dev Teams apps Tech lead tools wcag webdev Windows terminal
©2025 A cup of dev | WordPress Theme by SuperbThemes.com