.Net Core Api template CORS issue get from axios

Question

Im currently following a React tutorial where at one point axios is used to get data from a fake webservice. I've decided to make a bare bones web server using the ASP.net Core application A{I template from visual studio comunity 2019, add a new controller to return some hardcoded data.

all's good with the server, I can retrieve a string from my get method with the serialized json objects when I hit it using postman.

I have then tried to make axios run the same get request, and i keep getting

Access to XMLHttpRequest at 'http://localhost:52340/tools' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

in chrome, and a similar error in firefox.

after a quick googling about i started adding cors using the "Microsoft.AspNetCore.Cors 2.2.0" package in the multiple formats that it is claimed to work. but my react app continues to return the same error in the console when it tries to get the data.

I have tried to setup CORS in the basis of action, specific policy name, controller wide and presently the code in my startup.cs is the folowing.

public class Startup
{
    public Startup(IConfiguration configuration)
    {
        Configuration = configuration;
    }

    public IConfiguration Configuration { get; }

    // This method gets called by the runtime. Use this method to add services to the container.
    public void ConfigureServices(IServiceCollection services)
    {
        services.AddCors(options=>
        {
            options.AddDefaultPolicy(builder =>
            {
                builder
                .SetIsOriginAllowed((host) => true)
                .AllowAnyMethod()
                .AllowCredentials()
                .AllowAnyHeader()
                ;
            });
        });
        services.AddControllers().SetCompatibilityVersion(Microsoft.AspNetCore.Mvc.CompatibilityVersion.Latest);
    }

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

        app.UseRouting();
        //app.UseCors(options => options.AllowAnyOrigin().AllowAnyMethod().AllowAnyHeader());
        app.UseCors();

        app.UseAuthorization();

        app.UseEndpoints(endpoints =>
        {
            endpoints.MapControllers();
        });
    }
}

Ive seen multiple blog posts and stack overflow questions on this topic these being just 2 examples. .NET Core 2 Web API: CORS issues https://weblog.west-wind.com/posts/2016/sep/26/aspnet-core-and-cors-gotchas

but still after multiple hours of different attempts I'm still out of luck luck, I have no idea what did i miss.

I suspect theres something really obvious wrong, but i cant figure it out. hoping someone here can point me in the right direction

score 0 · Answer 1 · answered Dec 01 '20 at 13:08

0

Try add named cors policy:

services.AddCors(o => o.AddPolicy("LowCorsPolicy", builder =>
            {
                builder.AllowAnyOrigin()
                       .AllowAnyMethod()
                       .AllowAnyHeader();
            }));

and use it

app.UseCors("LowCorsPolicy");

app.UseHttpsRedirection();
app.UseRouting();

answered Dec 01 '20 at 13:08

Mihal By

162
2
12

I've tried variations on that previously without any success, and trying exactly what you suggested didnt work either :( Ive seen plenty of comments saying to make sure the "useCors" line is ran before the "useMVC" line, but my service is not MVC, its jsut a server side controllers without views. so i placed that line where it stands at the moment. Thanks for the tip anyway. – Joao Vasconcelos Dec 01 '20 at 16:59

score -1 · Answer 2 · answered Dec 01 '20 at 17:58

after reading this little side note https://stackoverflow.com/a/59042810/2311139

I tested commenting the https redirection and foud my requests working. Now I Realised that probably should have tried to run the requests via https to start instead of leaving that setup for later.

.Net Core Api template CORS issue get from axios

2 Answers2