CORS issue with WASM Blazor app and an Azure Function

Question

I am trying to call an Azure function I have created from a Blazor WASM app. Both built with .Net8. In the Azure function I have added the blazor apps Url in the Allowed origins list on the CORS page.

I am getting an error that starts with:

System.Text.Json.JsonException: ExpectedStartOfValueNotFound, < Path: $ | LineNumber: 0 | BytePositionInLine: 0.

Which seems to indicate the JSON body is missing. Calling the endpoint from the browser returns perfectly valid JSON, and when I run both Azure Function and Blazor app on localhost, everything works fine.

Looking into this, it seems to me I have run into an opaque response stuation, meaning that the app cannot access its content or status.

Is that the case and how can I get around it?

BTW, I know I can use the managed API feature of Static Web Apps to get around CORS issues, but I need the stand alone Azure function to be available for other users.

Answer 1

CORS issue with WASM Blazor app and an Azure Function. I am trying to call an Azure function I have created from a Blazor WASM app. Both built with .Net8.

Using below code i have got json response as expected when calling from Blazor:

Azure Function App Function.cs:

using System.Net;
using Azure;
using System.Text.Json;
using Microsoft.Azure.Functions.Worker;
using Microsoft.Azure.Functions.Worker.Http;
using Microsoft.Extensions.Logging;

namespace FunctionApp105
{
    public class Function1
    {
        private readonly ILogger _logger;

        public Function1(ILoggerFactory loggerFactory)
        {
            _logger = loggerFactory.CreateLogger<Function1>();
        }

        [Function("Function1")]
        public async Task<HttpResponseData> RunAsync([HttpTrigger(AuthorizationLevel.Function, "get", "post")] HttpRequestData req)
        {
            _logger.LogInformation("C# HTTP trigger function processed a request.");

            
            var result = new RithClass
            {
                Message = "Hello Rithwik Bojja!!!! Message from Azure Functions!!!!",
                ID = 8
            };

            var rithresponse = req.CreateResponse(HttpStatusCode.OK);
            rithresponse.Headers.Add("Content-Type", "application/json");

            var values = new JsonSerializerOptions { PropertyNamingPolicy = JsonNamingPolicy.CamelCase };
            await rithresponse.WriteStringAsync(JsonSerializer.Serialize(result, values));

            return rithresponse;
            
        }

        private class RithClass
        {
            public string Message { get; set; }
            public int ID { get; set; }
        }
    }
}

Then Blazor app :

Program.cs:

using BlazorApp6;
using Microsoft.AspNetCore.Components.Web;
using Microsoft.AspNetCore.Components.WebAssembly.Hosting;


var builder = WebAssemblyHostBuilder.CreateDefault(args);

builder.RootComponents.Add<App>("#app");
builder.RootComponents.Add<HeadOutlet>("head::after");

builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(builder.HostEnvironment.BaseAddress) });
using var httpClient = new HttpClient();
var rith = await httpClient.GetAsync("https://rithwik09.azurewebsites.net/api/Function1?code=MA_6Xp0TnQ2inXly6BmkOP_qRAzFuFBhfGQ==");
var rithcon = await rith.Content.ReadAsStringAsync();
builder.Services.AddSingleton(new RithConfig { Message = rithcon });
await builder.Build().RunAsync();
public class RithConfig
{
    public string Message { get; set; }
}

Home.razor:

@page "/"

<PageTitle>Home</PageTitle>

<h1>Hello, world!</h1>

Welcome to your new app.
@inject RithConfig test

<h3>Home</h3>
<p>@test.Message</p>

Then in Azure function app add web app service(blazor app) url:

When I run its giving me correct json response from Azure Function: