Nach dem Erstellen einer Standard-Blazor-App (V0.5.1) erhalten wir eine FetchData.cshtml-Seite, die ihre Daten aus einer lokalen .json-Datei bezieht
@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; }
}
}
Das funktioniert gut. Wenn Sie dies jedoch ändern, um die gleichen Daten von einem .net-Core-Rest-Web-API zu Http.GetJsonAsync
hängt der Aufruf von Http.GetJsonAsync
. Es gibt keinen Fehler, der nie abgeschlossen wird.
protected override async Task OnInitAsync()
{
forecasts = await Http.GetJsonAsync<WeatherForecast[]>(
"http://localhost:5000/api/weatherforecast/");
}
Was vermisse ich?
Höchstwahrscheinlich stoßen Sie auf ein CORS-Problem, da die API und die Site auf einem anderen Port ausgeführt werden.
Ich habe Cors aktiviert, wie Sie Cross-Origin-Anfragen (CORS) in ASP.NET Core MVC aktivieren . Das Hinzufügen einiger Zeilen zum Standard-Webdienstcode hat den Zweck erfüllt.
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();
}