Consume REST API from Blazor WebAssembly

In this tutorial, I'll show you how to call and consume a REST API service from a Blazor WebAssembly application.
I'll explain how to enable CORS (Cross-Origin Resource Sharing) on the RESTful service side.
You'll learn how to register HttpClient with the address of WebAPI service and inject it to the Razor components.
Finally, I'll show you how to display binary images of categories in the Northwind database.

[@Valoo24]

Thank you so much for such a concise yet complete explanation. I couldn't find out why I couldn't consume my API. Turns out I completly forgot about CORS. Keep up the good work !

[@MrNoga1984]

Good job bro. Very simple yet instructive. Just what I needed to get me off my journey in Blazor WASM

[@RoozbehShad]

Thanks MrNoga1984. I’m happy you found it useful.

[@laurosantana1477]

God bless you man!!! I was having a bad time with this blazor error in the bottom, you save all my work

[@RoozbehShad]

Thanks. I'm glad it was helpful. Have you seen the latest video?

[@user-zn5uq6xk2n]

سلام اقای شاد .
تدریستون عالی هست ، و از ویدیوتون ممنونم .
میخواستم درخواست کنم یک ویدو بسازید در باره نحوه تعیین سطح دسترسی کاربران با نقش های مختلف به سطوح مختلخ .
authentication .
این مسئله رو زیاد دنبالش میگردم ولی چیزی که اصولی باشه رو پیدا نمیکنم .
از ویدو خوبتون هم متشکرم . ❤❤❤❤❤

[@RoozbehShad]

از توجه مثبت شما سپاسگزارم. اتفاقن چیزی که راجع به سطوح مختلف دسترسی اشاره کردید یکی از برنامه های آموزشی مورد نظر من هست که تهیه و ازائه کنم، ولی چون این مجموعه بر طبق یک روال منطقی و از پیش تعیین شده تدوین شده، ارائه این ویدیو در زمان حاظر در دستور کارم نیست. با این وجود مطمئنم که ویدیوهای بعدی را بسیار آموزنده، جذاب و مفید خواهید یافت.

[@user-zn5uq6xk2n]

@@RoozbehShad متشکرم ، منتظر ویدیو های بعدیتون هستم

[@theentein]

You are my hero man for today :D

[@RoozbehShad]

Thanks The Entein! I'm happy you liked it.

[@Pasi70150]

Good video 👍👍👍

[@mesquitaasas]

Many thanks for sharing!

[@RoozbehShad]

My pleasure!

[@josecarlosmacoratti]

Good job

[@RoozbehShad]

Thanks Jose.

[@JC-yv1qj]

Very useful, sepaas gozaaram

[@RoozbehShad]

خواهش می‌کنم.
I'm glad you like it. If you're interested in this series, please subscribe to get notified of the upcoming videos.

[@JC-yv1qj]

@@RoozbehShad Indeed, be salamat

[@MiekeJansenvanRensburg]

Thank you so much!

[@RoozbehShad]

You're welcome! Have you seen the latest video?

[@eduarsanchez1851]

Good contens

[@RoozbehShad]

I'm glad you liked it. I released a new video on the first day of the new year. Please watch and enjoy it!

[@krzysztofbarbarski3966]

Get request works, but i have this samme error for Post request...

[@RoozbehShad]

Thanks for reaching out. Try the following in your ConfigureServices method of the Startup class in the api project:
services.AddCors(options => {
options.AddPolicy(name: "AllowBlazorOrigin",
builder => {
builder.WithOrigins("localhost:53555",
"localhost:44380",
"localhost:5000",
"localhost:5001")
//.AllowAnyHeader()
//.AllowAnyMethod()
.WithHeaders("Content-Type");
});
});
Change the addresses based on yours and let me know if you need more help.
Regards,
Roozbeh

[@torrvic1156]

What about DELETE, PUT and POST operations sir?
Thanks for the video anyway!

[@qutiephoebe2154]

Great vid.👍😁 I'm a bit new to blazor web assembly. In the 4:50 of the vid, Can a web assembly consume multiple Web Api base addresses?
Let's say the app is consuming 1 web api from amazon and another web api from Microsoft. Is that possible? Thanks.

[@RoozbehShad]

Thanks
@qutiephoebe2154 and sorry for such late reply. Yes, you can. You just need to register each one with the DI container as we did in the video and use each one whenever needed. If you need more help let me know.
Regards,
Roozbeh

[@probalroy76]

Background music is annoying.

[@julianpercivalortizherrera5979]

Muy util

[@RoozbehShad]

Thanks Julian for your positive comment. If you're interested in the upcoming videos and you haven't subscribed yet, please do it to get notified of the new ones.
Thanks,
Roozbeh Shad

[@amirpanah4197]

سلام روزبه جان

[@amirpanah4197]

کد این آموزش رو نیاز دارم، اگه امکانش هست برام بفرست

[@RoozbehShad]

سلام امیر جان، ببخشید بخاطر تاخیر طولانی در ارسال این پاسخ. خیلی شلوغ بودم. شما می تونی کد هر ویدیو رو بطور جداگانه از گوگل درایو من به آدرس زیر دانلود کنی:
drive.google.com/drive/folders/1-7yxcskfrwHi6aPXaujAnVdR2kHd8yXq
هر سوال دیگری که داشته باشی من در خدمتم.

[@first8208]

great video! could you upload the source code to github please?

[@RoozbehShad]

Thanks Jay for your support. I have plan to do it soon, but in the meantime you can get the source code on my google drive here: drive.google.com/drive/folders/1-7yxcskfrwHi6aPXaujAnVdR2kHd8yXq