Search code examples
c#asp.net-coreblazorcorsblazor-webassembly

Blazor WASM Local dev CORS errors fetching API endpoints

I have a Blazor WASM project that contains two projects:

  • ProjectName.Api
    • Azure Function API Endpoints
  • ProjectName.Client
    • Blazor WASM project

I was originally able to run the solution locally just fine, but recently had to (re)clone the solution locally and now getting the following CORS errors when it trying to fetch the local API endpoints:

enter image description here

I confirmed the API endpoints load fine locally when loading directly:

enter image description here

enter image description here

Originally I had to add the following setting to 'appsettings.Development.json':

enter image description here

With the following in 'Program.cs':

enter image description here

This always allowed me to run locally and in production without any issues. I've confirmed the ports are correct.

Any thoughts on why I would be getting CORS errors now locally? I am little confused why it was working and then stopped after cloning repo...

If it helps you can look at the source code here:

https://github.com/seanrco/stevens-pass-companion

Solution

  • Adding 'local.settings.json' file configured with the following CORS setting to my Azure Function API project resolved the issue for me:

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

    The following SO answer helped me (https://stackoverflow.com/a/60109518/443971).