Client fails to fetch data from API

[MisterJEFFREY]

Greetings.

I wanted to try out this starter project and according to the readme file:

• Create a repository from the GitHub template and then clone it locally to your machine.
• In the ApiIsolated folder, copy local.settings.example.json to local.settings.json
• Continue using either Visual Studio or Visual Studio Code.

While there is no local.settings.json in this project, the fix for this is add in a new file with the same name.

However, running the project and then navigating to the classic weather forecast page, I get the following error:

System.Text.Json.JsonException: '<' is an invalid start of a value. Path: $ | LineNumber: 0 | BytePositionInLine: 0. blazor.webassembly.js:1 ---> System.Text.Json.JsonReaderException: '<' is an invalid start of a value. LineNumber: 0 | BytePositionInLine: 0. blazor.webassembly.js:1 at System.Text.Json.ThrowHelper.ThrowJsonReaderException(Utf8JsonReader& json, ExceptionResource resource, Byte nextByte, ReadOnlySpan1 bytes)
blazor.webassembly.js:1 at System.Text.Json.Utf8JsonReader.ConsumeValue(Byte marker)
blazor.webassembly.js:1 at System.Text.Json.Utf8JsonReader.ReadFirstToken(Byte first)
blazor.webassembly.js:1 at System.Text.Json.Utf8JsonReader.ReadSingleSegment()
blazor.webassembly.js:1 at System.Text.Json.Utf8JsonReader.Read()
blazor.webassembly.js:1 at System.Text.Json.Serialization.JsonConverter1[[BlazorApp.Shared.WeatherForecast[], Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state) blazor.webassembly.js:1 --- End of inner exception stack trace --- blazor.webassembly.js:1 at System.Text.Json.ThrowHelper.ReThrowWithPath(ReadStack& state, JsonReaderException ex) blazor.webassembly.js:1 at System.Text.Json.Serialization.JsonConverter1[[BlazorApp.Shared.WeatherForecast[], Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].ReadCore(Utf8JsonReader& reader, JsonSerializerOptions options, ReadStack& state)
blazor.webassembly.js:1 at System.Text.Json.JsonSerializer.ReadCore[WeatherForecast[]](Utf8JsonReader& reader, JsonTypeInfo jsonTypeInfo, ReadStack& state)
blazor.webassembly.js:1 at System.Text.Json.JsonSerializer.ContinueDeserialize[WeatherForecast[]](ReadBufferState& bufferState, JsonReaderState& jsonReaderState, ReadStack& readStack, JsonTypeInfo jsonTypeInfo)
blazor.webassembly.js:1 at System.Text.Json.JsonSerializer.d__761[[BlazorApp.Shared.WeatherForecast[], Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext() blazor.webassembly.js:1 at System.Net.Http.Json.HttpContentJsonExtensions.<ReadFromJsonAsyncCore>d__51[[BlazorApp.Shared.WeatherForecast[], Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext()
blazor.webassembly.js:1 at System.Net.Http.Json.HttpClientJsonExtensions.d__291[[BlazorApp.Shared.WeatherForecast[], Shared, Version=1.0.0.0, Culture=neutral, PublicKeyToken=null]].MoveNext() blazor.webassembly.js:1 at BlazorApp.Client.Pages.FetchData.OnInitializedAsync() in \Client\Pages\FetchData.razor:line 46

Other than adding the "local.settings.json" file and making sure the api project file did include it, nothing else was changed from the starter project.

Please advise and thanks in advance!

[fordkilleen]

I just started playing around with this template too, and at first I didn't see it either, but inside the Api folder there is a local.settings.example.json file, which I renamed to local.settings.json. Though, that was not enough for the API call to succeed for me either. Then I noticed a message regarding CORS in the debug console and noticed that nothing was actually using that settings file yet. When I added the below code to Api/Program.cs host chain I was able to see the API calls succeeding when running locally. Note, these are meant to be local settings, so you may need to add some additional logic here to ensure they are overridden or not included when published to Azure. Hope this helps!

.ConfigureHostConfiguration(c => c.AddJsonFile("local.settings.json"))

[MisterJEFFREY]

I just started playing around with this template too, and at first I didn't see it either, but inside the Api folder there is a local.settings.example.json file, which I renamed to local.settings.json. Though, that was not enough for the API call to succeed for me either. Then I noticed a message regarding CORS in the debug console and noticed that nothing was actually using that settings file yet. When I added the below code to Api/Program.cs host chain I was able to see the API calls succeeding when running locally. Note, these are meant to be local settings, so you may need to add some additional logic here to ensure they are overridden or not included when published to Azure. Hope this helps!

.ConfigureHostConfiguration(c => c.AddJsonFile("local.settings.json"))

@fordkilleen ,thanks for your response.
I checked out your tip and it still results in the same 'invalid start of a value' error.

Here's the strange thing that I found recently...If you're using Visual Studio 2022, change the startup settings to Api + Client, then click on the api url inside the terminal, a new browser tab will open and one can see the api returning JSON content.

The API seems to be working well on its own when running locally. However, when using the client and then making the api call locally, the call fails....

...and I'm not sure why...

[MisterJEFFREY]

@fordkilleen, this has now been marked as resolved because I realized my error.
I have not realized that the ReadMe file contained the Visual Studio instructions on how to run the project:

• Right-click on the solution and select Set Startup Projects....
• Select Multiple startup projects and set the following actions for each project:
  --Api - Start
  --Client - Start
  --Shared - None

This is unfortunately a classic case of "many hours of debugging can save you 5 minutes of reading documentation."