Как позвонить в службу отдыха из приложения Blazor

Question

После создания приложения Blazor по умолчанию (V0.5.1) мы получаем страницу FetchData.cshtml, которая получает свои данные из локального файла .json

@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; }
    }
}

Это отлично работает. Однако, если изменить это, чтобы получить те же данные из .net core rest web api, вызов Http.GetJsonAsync зависнет. Там нет ошибки, это просто никогда не завершается.

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

Что мне не хватает?

Answer 1

Мне нужно было включить Cors, согласно Как включить перекрестные запросы (CORS) в ASP.NET Core MVC . Добавление пары строк в код веб-службы по умолчанию принесло свои плоды.

        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();
        }

Answer 2

Скорее всего, вы столкнулись с проблемой CORS, потому что API и сайт работают на разных портах.