CORS failed: The Same-Origin Policy disallows reading the remote resource

Question

I keep getting the following error in Firefox:

Cross-Origin Request Blocked: The Same-Origin Policy disallows reading the remote resource at http://192.168.0.146:5000/api/auth/login. (Reason: CORS request failed). Status code: (null).

I created both apps with Visual Studio Code using .NET 8. When I run dotnet run on both the server and the client, they both start up, telling me, that they are listening on localhost:5001 (the client) and localhost:5000 (the api). I am able to directly make api calls and also I'm able to use the Blazor WASM GUI. Great!

Now I want to publish the apps to Ubuntu VM. I installed the necessary packages on the VM, cloned the git repository and ran dotnet publish -c Release -o /some/dir for each project. The client part was then copied to /var/www/html and ran chmod -R www-data:www-data *.

Additionally i set up nginx, which configuration looks like this:

server {
        listen 80 default_server;
        listen [::]:80 default_server;

        root /var/www/html;

        index index.html;

        server_name _;

        location / {
                root /var/www/html;
                try_files $uri $uri/ /index.html;
        }

        location /_framework {
                root /var/www/html;
        }

        location /css {
                root /var/www/html;
        }

        location /js {
                root /var/www/html;
        }
}

I ran my app in the browser and it starts up correctly. I also started my server by running dotnet Server.dll which also starts up correctly. I can make direct api calls with RESTed. But when I try to for example register a user on the web client, which makes a call to the api, i keet getting the CORS failed error in firefox.

I see that the server doesn't make any logs. When calling the api directly, I can see logs in the server.

I have the following Code snippet in my api's Program.cs:

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowAll",
        builder => builder.AllowAnyOrigin()
        .AllowAnyMethod()
        .AllowAnyHeader()
    );
});

and further below:

app.UseCors("AllowAll");
app.UseHttpsRedirection();
app.UseAuthorization();
app.MapControllers();
app.Run();

In the blazor Program.cs i created the HttpClient like this:

//var apiBaseUrl = builder.Configuration["ApiBaseUrl"] ?? "http://localhost:5000";
var apiBaseUrl = "http://192.168.0.146:5000";
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(apiBaseUrl) });

I tried both, the commented out line as well as the line under it. I created a environment variable ApiBaseUrl which also contained the same url.

It doesn't even matter if the server is running or not: I get the same CORS error and I can't find the error. It seems that the client can't contact the server at all, although its the same machine.

Oh by the way, this is the header content of the failed OPTIONS method:

OPTIONS /api/auth/login undefined
Host: 192.168.0.146:5000
User-Agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:129.0) Gecko/20100101 Firefox/129.0
Accept: */*
Accept-Language: de,en-US;q=0.7,en;q=0.3
Accept-Encoding: gzip, deflate
Access-Control-Request-Method: POST
Access-Control-Request-Headers: content-type
Referer: http://192.168.0.146/
Origin: http://192.168.0.146
DNT: 1
Connection: keep-alive
Priority: u=4

No firewall is running on the server. It's a fresh install of Ubuntu Server LTS 24.04.

So what am I doing wrong? Do I miss a configuration file, environment variable etc.?

r-kane · Accepted Answer · 2024-08-29 05:25:11Z

0

I found a solution, that worked for me.

First I replaced this lines:

var apiBaseUrl = builder.Configuration["ApiBaseUrl"] ?? "http://localhost:5000";
builder.Services.AddScoped(sp => new HttpClient { BaseAddress = new Uri(apiBaseUrl) });

against this

builder.Services.AddScoped(sp => new HttpClient
{
    BaseAddress = new Uri(builder.HostEnvironment.BaseAddress)
});

Then I added the following block to my nginx configuration:

location /api/ {
                proxy_pass http://localhost:5000;
                proxy_http_version 1.1;
                proxy_set_header Upgrade $http_upgrade;
                proxy_set_header Connection keep-alive;
                proxy_set_header Host $host;
                proxy_cache_bypass $http_upgrade;
        }

answered Aug 29, 2024 at 5:25

r-kane

393 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

CORS failed: The Same-Origin Policy disallows reading the remote resource

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related