C#•2mo ago

✅ CORS issue when making GET request to server running asp application.

Hi, I have this api: https://wsapi.tyrells.net/api/categories And this webapp: https://wordsearch.tyrells.net/ This is the CORS code in the api:

c#
var app = builder.Build();

app.UseCors(builder => builder.WithOrigins(["https://wordsearch.tyrells.net/", "https://wordsearch-tyrells-net.pages.dev/"])
    .AllowAnyHeader()
    .AllowAnyMethod()
    .AllowCredentials());

c#
var app = builder.Build();

app.UseCors(builder => builder.WithOrigins(["https://wordsearch.tyrells.net/", "https://wordsearch-tyrells-net.pages.dev/"])
    .AllowAnyHeader()
    .AllowAnyMethod()
    .AllowCredentials());

This is the error in the webapp console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://wsapi.tyrells.net/api/categories. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://wsapi.tyrells.net/api/categories. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.

The server receives the request when fetching from the webapp.

info: Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (14ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      SELECT "c"."name", "c"."id"
      FROM "categories" AS "c"

info: Microsoft.EntityFrameworkCore.Database.Command[20101]
      Executed DbCommand (14ms) [Parameters=[], CommandType='Text', CommandTimeout='30']
      SELECT "c"."name", "c"."id"
      FROM "categories" AS "c"

Making a GET request works fine when opening https://wsapi.tyrells.net/api/categories in browser. Have I done something blatantly incorrect? I have no idea where I've gone wrong. Thanks

44 Replies

Servant of Time•2mo ago

The webapp is hosted using cloudflare pages. I'm not sure if it makes a difference. If i run the webapp from localhost I get the same error, but I expect that to happen because I havent included http://localhost:5173/ in the cors string array is it the slash at the end of the url in the CORs string array

Pobiega•2mo ago

so a few things one, I've never seen the CORS policy being constructed in UseCors before. Usually, you set it with AddCors then activate the middleware with UseCors and yes, the trailing slash should not be there. Not sure if its the issue here, but its not standard

Servant of Time•2mo ago

I'll redeploy without the trailing slashes first. then look into addcors docs.

Pobiega•2mo ago

builder.Services.AddCors(x
    => x.AddDefaultPolicy(p
        => p
            .WithOrigins("https://wordsearch.tyrells.net", "https://wordsearch-tyrells-net.pages.dev")
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials()));

var app = builder.Build();

app.UseCors();

builder.Services.AddCors(x
    => x.AddDefaultPolicy(p
        => p
            .WithOrigins("https://wordsearch.tyrells.net", "https://wordsearch-tyrells-net.pages.dev")
            .AllowAnyMethod()
            .AllowAnyHeader()
            .AllowCredentials()));

var app = builder.Build();

app.UseCors();

this is more what I'd expect

Servant of Time•2mo ago

Removing the trailing slashes didn't work. I was using

c#
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
    app.UseCors(builder => builder.
        WithOrigins("http://localhost:5173")
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials());

}

c#
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
    app.UseCors(builder => builder.
        WithOrigins("http://localhost:5173")
        .AllowAnyHeader()
        .AllowAnyMethod()
        .AllowCredentials());

}