C#•5mo 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

Shadow Wizard Money GangOP•5mo 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•5mo 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

Shadow Wizard Money GangOP•5mo ago

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

Pobiega•5mo 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

Shadow Wizard Money GangOP•5mo 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());

}

in development so I just thought it would be the same.

Pobiega•5mo ago

I just opened your webapp and it seems fine to me? im not getting any cors errors

Shadow Wizard Money GangOP•5mo ago

click on single player, it makes the first fetch there

Pobiega•5mo ago

I did. the request worked.

Pobiega•5mo ago

Pobiega•5mo ago

you can see the CORS header right there

Shadow Wizard Money GangOP•5mo ago

are you able to select categories ?

Pobiega•5mo ago

yep

Pobiega•5mo ago

Shadow Wizard Money GangOP•5mo ago

https://tenor.com/view/joe-biden-presidential-debate-huh-confused-gif-16704157274113773062

Tenor

Pobiega•5mo ago

look. CORS headers. 🙂

Shadow Wizard Money GangOP•5mo ago

ok so i just closed firefox and its all good now... I will still go read the add cors docs and figure out your example

Pobiega•5mo ago

ah yeah fiddling with stuff like this might require restarting your browser its probably no different when only using a single policy it was just not something I've ever seen before

Pobiega•5mo ago

from that very page 🙂

Shadow Wizard Money GangOP•5mo ago

Yeah I just double checked. honestly im not sure where I found the orignal code

Pobiega•5mo ago

doesnt matter it works the same way as AddDefault when you only have one and honestly, multiple cors policies is kinda rare

Shadow Wizard Money GangOP•5mo ago

would that be for something like having a webapp frontend and a mobile frontend?

Pobiega•5mo ago

¯\_(ツ)_/¯ I've never come across it. CORS is very easy to get around, its mostly a safety thing for the frontend to prevent lazy API theft

Shadow Wizard Money GangOP•5mo ago

thanks again for saving my ass. I think you helped me in my last help thread as well. I defnitely need to read up on it by the sounds of it. I've only have brief knowledge from a .net textbook.

Pobiega•5mo ago

its a browser thing its actually the clients browser that checks for CORS and disallows the request so if you tweak your browser to not care about CORS....

Shadow Wizard Money GangOP•5mo ago

i know it stops requests from different orgins but I'm not certain on what actually counts as different origins

Pobiega•5mo ago

it literally looks at the url base path

Shadow Wizard Money GangOP•5mo ago

there's probably more rules to it though?

Pobiega•5mo ago

no not really

Shadow Wizard Money GangOP•5mo ago

oh cool something straightforward for once

Pobiega•5mo ago

its just to prevent things like x-site scripting attacks but ideally they are already stopped on the serverside the idea is that its one of many layers in the http sphere to help stop XSS attacks. Lets say you make a webapp for a bank actually idk where Im going with this analogy. ignore it. its one of many layers, thats all you need to know 😄

Shadow Wizard Money GangOP•5mo ago

I've heard of cross site scripting attacks. isn't it basically injecting malicous javascript

Pobiega•5mo ago

yeah, but how you do that can be in many different ways

Shadow Wizard Money GangOP•5mo ago

I'm happy to figure it out on my own ive found this https://owasp.org/www-community/Types_of_Cross-Site_Scripting

Types of XSS on the main website for The OWASP Foundation. OWASP is a nonprofit foundation that works to improve the security of software.

Pobiega•5mo ago

imagine if I make a spoof webpage that sends actual real requests to your actual real bank API but with data provided by my spoofy nasty page so you think you are just paying your bills, but the webapp is issuing "transfer all the money to Pobiega" requests this wouldnt be possible due to CORS since the bank api probably checks that only their real domains can access it

Shadow Wizard Money GangOP•5mo ago

ah okay that makes sense. so its mainly a browser side thing. like i just realised curl doesnt use cors. so the bank would use authorization aswell.

Pobiega•5mo ago

yeah ofc

Shadow Wizard Money GangOP•5mo ago

and anyway the jokes on them, they can have my negative balance.

Pobiega•5mo ago

but authorization tokens and cookies can be stolen so its one of many layers

Shadow Wizard Money GangOP•5mo ago

https://tenor.com/view/rabbit-hole-alice-in-wonderland-fall-roll-gif-9377042879026695800

Tenor

Pobiega•5mo ago