nammadhu / poc.blazorwasmconsumingrestwebapiandazurefunctions Goto Github PK

Section1> Blazor webassembly consuming API (Using DotNet 8.0 versions for all)

Create Blazor Wasm with No Authentication Create Web Api with No Authentication

ClientSide(wasm) No specific change required(unless credentials)

On Api Side, By default its like below

Then Try Consuming API by calling at clientside as below, @inject HttpClient Http .... protected override async Task OnInitializedAsync() { var items = await Http.GetFromJsonAsync<WeatherForecast[]>("https://localhost:7298/WeatherForecast"); if (items != null) forecasts = items;//await Http.GetFromJsonAsync<WeatherForecast[]>("sample-data/weather.json"); }

APi URL can be taken from running instance on browser or cmd prompt Http or Https both as per the needs, https://localhost:7298/WeatherForecast or http://localhost:5161/WeatherForecast

Then CORS Error appears as like below,

Then Changes required are as below ,

//below required for localhost working builder.Services.AddCors(options => { options.AddDefaultPolicy(builder => { builder.AllowAnyOrigin() .AllowAnyMethod() .AllowAnyHeader(); }); }); //above required for localhost working builder.Services.AddControllers();

app.UseCors(); // required for localhost app.UseHttpsRedirection(); It becomes as below,

Configure Startup Projects both Client Wasm & Api as running( Right click on Solution Explorer Solution name & choose ) Then

Then Run & enjoy further as per the need

Continuation of this thread are as below, https://stackoverflow.com/questions/68585377/access-to-xmlhttprequest-at-https-login-microsoftonline-com-has-been-blocked-b

https://www.freecodecamp.org/news/how-to-implement-azure-serverless-with-blazor-web-assembly/

Section2> Blazor webassembly consuming Azure Functions Add Az functions project to solution Then it becomes like this, To enable add CORS like below(also can mention mention website name to allow instead of * ALL)

Get the az function local URL from cmd prompt & test the same on browser for quick check

Then at clientside change consumption as below

Final result as like below,

Note: 1>For working on local environment wrt Azure functions,it needs some extra permission to run. Usually in many corporate provided systems its not allowed to run since its not trucsted properly.So try for suitable respective solution . 2> For working locally,its better to maintain configurations is separate config files & not to check in . ANd always preferred to not check in this file. Still if you want to check in change on gitignore to include. Like Developement.settings.json or local.settings.json

3>For enabling CORS on local make it like this

4> To fix CORS issue 2 apporoches usually, Temporary Front-End solution so you can test if your API integration is working: Click on windows -> type run and hit enter -> in the command window copy: chrome.exe --user-data-dir="C://Chrome dev session" --disable-web-security This will open a new "Chrome" window where you can work easily. This is a temporary solution. Every time you will have to work with this chrome window.

Permanent solution: In the backend code, the developer needs to add an annotation @Crossorigin right above the CRUD api call method.