C#•2y ago

✅ CORS: Cross-Origin Request Blocked

Hello, I'm trying to figure out how to configure CORS on my .NET Web Api Application. The Api Application is hosted on localhost:5000, while the ReactJS Frontend is hosted on localhost:3000.

public static void InitializeCORS(this IServiceCollection services)
{
    var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

    services.AddCors(options =>
                {
                    options.AddPolicy(name: MyAllowSpecificOrigins,
                                        policy =>
                                        {
                                            policy.WithOrigins("http://localhost:3000/*").AllowAnyHeader().AllowAnyMethod();
                                        });
                });
}

public static void InitializeCORS(this IServiceCollection services)
{
    var MyAllowSpecificOrigins = "_myAllowSpecificOrigins";

    services.AddCors(options =>
                {
                    options.AddPolicy(name: MyAllowSpecificOrigins,
                                        policy =>
                                        {
                                            policy.WithOrigins("http://localhost:3000/*").AllowAnyHeader().AllowAnyMethod();
                                        });
                });
}

Also have defined Application to use Cors in Program.cs

app.UseCors();

app.UseCors();

I've followed this from MSDN: https://learn.microsoft.com/en-us/aspnet/core/security/cors?view=aspnetcore-7.0

Enable Cross-Origin Requests (CORS) in ASP.NET Core

Learn how CORS as a standard for allowing or rejecting cross-origin requests in an ASP.NET Core app.

47 Replies

FusedQyou•2y ago

"http://localhost:3000/*" should be "http://localhost:3000" That's the host, or origin

RDasherOP•2y ago

Lemem try this Nope, this did not work either Which makes sense, cause I could've sworn I tried this

FusedQyou•2y ago

Well it's one of the things you should do You sure you run on port 3000?

RDasherOP•2y ago

Alright, that's one

RDasherOP•2y ago

Yes

FusedQyou•2y ago

And have you referenced the actual policy? I don't see it specified anywhere

RDasherOP•2y ago

What is the policy? I think that might be the issue Cause I didn't do anything like that

FusedQyou•2y ago

You add a policy, but you can also just set the default policy In your case you made the policy but you did not reference it 1 sec

RDasherOP•2y ago

OHHH, I need to use default policy lemme try that real quick

FusedQyou•2y ago

This is what I did with my last API

FusedQyou•2y ago

FusedQyou•2y ago

FusedQyou•2y ago

I didn't specify a policy and just used a default one

FusedQyou•2y ago

In your case, you need to specify the policy to use in UseCors, like the picture shows, or you do what I did.

RDasherOP•2y ago

k brb, lemme rewrite some code to try this Okay, so here is what I've done: Static Startup Class (Ignore the function names, that's temporary)

public static void InitializeCORS(this IServiceCollection services)
{
    services.AddCors();
}

public static void InitializeCORS(this WebApplication app)
{
    app.UseCors(configure => configure.WithOrigins("http://localhost:3000/").AllowAnyHeader().AllowAnyMethod());
}

public static void InitializeCORS(this IServiceCollection services)
{
    services.AddCors();
}

public static void InitializeCORS(this WebApplication app)
{
    app.UseCors(configure => configure.WithOrigins("http://localhost:3000/").AllowAnyHeader().AllowAnyMethod());
}

Program.cs

...
builder.ConfigureServices();

var app = builder.Build();


app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthentication();

app.UseAuthorization();

app.InitializeRoutes();

app.InitializeCORS();
...

...
builder.ConfigureServices();

var app = builder.Build();


app.UseHttpsRedirection();
app.UseStaticFiles();

app.UseRouting();

app.UseAuthentication();

app.UseAuthorization();

app.InitializeRoutes();

app.InitializeCORS();
...

This doesn't work either I'm gonna try default policy too Nope, neither this, nor the default policy example from MSDN worked

FusedQyou•2y ago

Maybe you need to add AllowCredentials to your CORS configuration? Because it's not a whole lot of code, I assume if you copy paste my example it would work

RDasherOP•2y ago

Yeah, I've just tried that, it's building Added AllowCredentials in both your way and the MSDN ways Both did not work

FusedQyou•2y ago

Huh Maybe a weird question, but you call both InitializeCORS methods? And you're sure both invoke, and not one twice for example? What exactly is the error?

RDasherOP•2y ago

Let me recheck, but I'm like 95% sure they should both invoke both of them do execute But wait, lemme just recheck something real quick

RDasherOP•2y ago

this is the error btw

RDasherOP•2y ago

On the frontend

RDasherOP•2y ago

Yeah double checked, both of them are being invoked And each only once Any other ideas @FusedQyou?

FusedQyou•2y ago

Can you try this?

I fixed this by going to the Properties for my .Net Core app in Visual Studio. I selected Debug from the menu on the left hand side. There was a checkbox on the page called Enable SSL along with a URL (https://localhost:44358/ in my case). I browsed to this page in Firefox, got a warning page, added a security exception for it and everything worked as expected after that.

Self signed certificate bullcrap can also cause this Maybe try adding localhost on post 5000 as an accepted origin Probably not the problem but I'm getting confused by the error. Not sure which one is the frontend url now

RDasherOP•2y ago

3000 is frontend 5000 is backend (dotnet)

FusedQyou•2y ago

Is your frontend using a self signed certificate? Since you only accept an unsecure connection

RDasherOP•2y ago

No, both without SSL using only http

FusedQyou•2y ago

Does your .NET pipeline force http to https?

RDasherOP•2y ago

Nope

FusedQyou•2y ago

Like I have app.UseHttpsRedirection() here Then I'm really confused

RDasherOP•2y ago

Since, I use it with thundercleint, and I get responses fine Also, I'm on VSCode on Linux, setting up SSL will take me a bit, I'll get back to this thread once I've set it up

FusedQyou•2y ago

I don't think that's the problem though But idk what else you could try

RDasherOP•2y ago

Also, another note, the site is opening fine in browser

FusedQyou•2y ago

Might be a header you're adding/is missing

RDasherOP•2y ago

Update: trying it with * does work

FusedQyou•2y ago

Does AllowAnyOrigin work?

RDasherOP•2y ago

Why doesn't http://localhost:5000/? 🤔

RDasherOP•2y ago

I did this

RDasherOP•2y ago

I don't want to allow all origins, I want to specifically allow only localhost:5000

FusedQyou•2y ago

Well it has to be http://localhost:5000, without the slash With the slash represents a full url, not the host. It's weird, I know Did you do it with the slash the whole time?

RDasherOP•2y ago

Yes, I did Let me try that real quick

FusedQyou•2y ago

Then that was the problem lol I told you to do it without the slash at the end in my very first message <:peepo_cry:640304738512142352> That, and the fact that you're not actually referencing the policy - but I assume you fixed that

RDasherOP•2y ago

Yup, that was it! hahaha it works now, lmfao

FusedQyou•2y ago

RDasherOP•2y ago

I have this habit of not reading properly pepecry

FusedQyou•2y ago

Same

RDasherOP•2y ago

Thank you very much, my dude Appreciate you sticking with my dumb ass for this long haha

FusedQyou•2y ago

No problemooo

Gaming

Programming

✅ CORS: Cross-Origin Request Blocked