{"id":10158,"date":"2023-11-19T19:30:09","date_gmt":"2023-11-19T19:30:09","guid":{"rendered":"https:\/\/putridparrot.com\/blog\/?p=10158"},"modified":"2024-12-20T10:09:10","modified_gmt":"2024-12-20T10:09:10","slug":"blazor-and-the-getfromjsonasync-exception-typeerror-failed-to-fetch","status":"publish","type":"post","link":"https:\/\/putridparrot.com\/blog\/blazor-and-the-getfromjsonasync-exception-typeerror-failed-to-fetch\/","title":{"rendered":"Blazor and the GetFromJsonAsync exception TypeError: Failed to Fetch"},"content":{"rendered":"<p>I have an Azure hosted web api. I also have a simple Blazor standalone application that&#8217;s meant to call the API to get a list of categories to display. i.e. the Blazor app is meant to call the Azure web api, fetch the data and display it &#8211; should be easy enough, right ?<\/p>\n<p>The web api can easily accessed via a web browser or a console app using the .NET HttpClient, but the Blazor code using the following simply kept throwing an exception with the cryptic message &#8220;TypeError: Failed to Fetch&#8221;<\/p>\n<pre class=\"brush: csharp; title: ; notranslate\" title=\"\">\r\n@inject HttpClient Http\r\n\r\n\/\/ Blazor and other code\r\n\r\nprotected override async Task OnInitializedAsync()\r\n{\r\n   try\r\n   {\r\n      _categories = await Http.GetFromJsonAsync&lt;string&#x5B;]&gt;(&quot;categories&quot;);\r\n   }\r\n   catch (Exception e)\r\n   {\r\n      Debug.WriteLine(e);\r\n   }\r\n}\r\n<\/pre>\n<p>What was happening is I was actually getting a CORS error, sadly not really reported via the exception so not exactly obvious.<\/p>\n<p>If you get this error interacting with your web api via Blazor then go to the Azure dashboard. I&#8217;m running my web api as a container app, type CORS into the left search bar of the resource (in my case a Container App). you should see the <em>Settings<\/em> section <em>CORS<\/em> subsection. <\/p>\n<p>Add * to the <em>Allowed Origins<\/em> and click apply. <\/p>\n<p>Now your Blazor app should be able to interact with the Azure web api app.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>I have an Azure hosted web api. I also have a simple Blazor standalone application that&#8217;s meant to call the API to get a list of categories to display. i.e. the Blazor app is meant to call the Azure web api, fetch the data and display it &#8211; should be easy enough, right ? The [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[96,305,3,311,356],"tags":[],"class_list":["post-10158","post","type-post","status-publish","format-standard","hentry","category-azure-2","category-blazor","category-c","category-cors","category-web-api"],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/10158","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/comments?post=10158"}],"version-history":[{"count":3,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/10158\/revisions"}],"predecessor-version":[{"id":11138,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/posts\/10158\/revisions\/11138"}],"wp:attachment":[{"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/media?parent=10158"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/categories?post=10158"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/putridparrot.com\/blog\/wp-json\/wp\/v2\/tags?post=10158"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}