How can I call a rest service from a Blazor app

Question

After creating a default Blazor app (V0.5.1) we get a FetchData.cshtml page which gets its data from a local .json file

@functions {
    WeatherForecast[] forecasts;

    protected override async Task OnInitAsync()
    {
        forecasts = await Http.GetJsonAsync<WeatherForecast[]>("sample-data/weather.json");
    }

    class WeatherForecast
    {
        public DateTime Date { get; set; }
        public int TemperatureC { get; set; }
        public int TemperatureF { get; set; }
        public string Summary { get; set; }
    }
}

This works fine. However, if change this to get the same data from a .net core rest web api the call to Http.GetJsonAsync hangs. There's no error it just never completes.

    protected override async Task OnInitAsync()
    {
        forecasts = await Http.GetJsonAsync<WeatherForecast[]>(
            "http://localhost:5000/api/weatherforecast/");
    }

What am I missing?

Also there is an error, I just needed to add an exception handler. — Phil, Sep 09 '18 at 14:12

Phil · Answer 1 · 2018-09-09T13:02:48.653

I needed to enable Cors, as per How do you enable cross-origin requests (CORS) in ASP.NET Core MVC. Adding a couple of lines to the default web service code did the trick.

        public void ConfigureServices(IServiceCollection services)
        {
            // add this
            services.AddCors(); 

            services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_1);
        }

request pipeline.
        public void Configure(IApplicationBuilder app, IHostingEnvironment env)
        {
            if (env.IsDevelopment())
            {
                app.UseDeveloperExceptionPage();
            }

            // and this
            app.UseCors(builder =>
            {
                builder.WithOrigins("http://localhost:5000")
                       .WithMethods("GET", "POST")
                       .AllowAnyHeader();
            });

            app.UseMvc();
        }

But make sure you add it to `Startup.cs` as well as `StartupJavaScript.cs` if the latter exists, too. That was my problem. — Cornelius Roemer, Dec 25 '20 at 23:09

score 0 · Accepted Answer · answered Sep 09 '18 at 09:24

0

Most probably you are running into a CORS issue, because the API and the site are running on a different port.

answered Sep 09 '18 at 09:24

Flores

8,226
5
49
81

you are correct. Inspecting the console output shows 'no "access-control-allow-origin" header is present …. set the request's mode to no-cors to fetch the resource with CORS disabled'. – Phil Sep 09 '18 at 12:27

How can I call a rest service from a Blazor app

2 Answers2