WASM: [System.Net.Http.HttpRequestException] TypeError: Failed to fetch

[lakani]

i get the following execption

Failed to load http://localhost:5001/api/TodoItems/: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:32899' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
MonoPlatform.ts:202 WASM: [System.Net.Http.HttpRequestException] TypeError: Failed to fetch
module.printErr @ MonoPlatform.ts:202
MonoPlatform.ts:202 WASM: at Microsoft.AspNetCore.Blazor.Browser.Http.BrowserHttpMessageHandler.SendAsync (System.Net.Http.HttpRequestMessage request, System.Threading.CancellationToken cancellationToken) <0x1e07650 + 0x0038e> in <7da830e0eabd429898584695ab9fd9e5>:0
module.printErr @ MonoPlatform.ts:202
MonoPlatform.ts:202 WASM: at System.Net.Http.HttpClient.SendAsyncWorker (System.Net.Http.HttpRequestMessage request, System.Net.Http.HttpCompletionOption completionOption, System.Threading.CancellationToken cancellationToken) <0x1df4860 + 0x0017e> in <86e6b54b599b4aa59c8ecb13ffc8f086>:0
module.printErr @ MonoPlatform.ts:202
MonoPlatform.ts:202 WASM: at System.Net.Http.HttpClient.GetStringAsync (System.String requestUri) <0x1de51e0 + 0x000ee> in <86e6b54b599b4aa59c8ecb13ffc8f086>:0
module.printErr @ MonoPlatform.ts:202
MonoPlatform.ts:202 WASM: at Microsoft.AspNetCore.Blazor.HttpClientJsonExtensions.GetJsonAsync[T] (System.Net.Http.HttpClient httpClient, System.String requestUri) <0x1f23d58 + 0x000c0> in <72270648a3b54698885c6ba1c18107cc>:0
module.printErr @ MonoPlatform.ts:202
MonoPlatform.ts:202 WASM: at WebApplication7.Pages.TodoPage.OnInitAsync () <0x1f15960 + 0x00130> in <284c865a052f41afa310cba3c98a6c31>:0

while calling

_todos = await Http.GetJsonAsync<TodoItem[]>("http://localhost:5001/api/TodoItems/");

i got two application, each one resides on a differnt domain

[floreseken]

Looks like you are running your API on a different site/port and are running into a CORS problem.

Add this:

            services.AddCors(options =>
            {
                options.AddPolicy("CorsPolicy",
                    builder => builder.AllowAnyOrigin()
                    .AllowAnyMethod()
                    .AllowAnyHeader()
                    .AllowCredentials());
            });

and

            app.UseCors("CorsPolicy");

[lakani]

thanks for your help, but to which Layer i should add the above code ???

[floreseken]

The startup of your API hosting project

[floreseken]

To understand: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

Please note that my solution is for development only.

[lakani]

its not working :(
i copied the below code from the startup of the API

public void ConfigureServices(IServiceCollection services)
{
services.AddEntityFrameworkSqlServer();

        services.AddDbContext<TODODBContext>(
            e =>
            {
                e.EnableSensitiveDataLogging();
                e.UseSqlServer(Configuration.GetConnectionString("DefaultConnection"));
            });

        services.AddCors(options =>
        {
            options.AddPolicy("CorsPolicy",
                builder => builder.AllowAnyOrigin()
                .AllowAnyMethod()
                .AllowAnyHeader()
                .AllowCredentials());
        });


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

    // This method gets called by the runtime. Use this method to configure the HTTP request pipeline.
    public void Configure(IApplicationBuilder app, IHostingEnvironment env)
    {
        if (env.IsDevelopment())
        {
            app.UseDeveloperExceptionPage();
        }
        else
        {
            //app.UseHsts();
        }

        //app.UseHttpsRedirection();
        app.UseMvc();
        app.UseCors("CorsPolicy");

    }

[SteveSandersonMS]

Thanks for answering, @floreseken!

@lakani You can find full documentation about enabling CORS from ASP.NET Core at https://docs.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-2.1