CORS 失败：同源策略不允许读取远程资源

Question

我在 Firefox 中不断收到以下错误：

跨源请求被阻止：同源策略不允许读取 http://192.168.0.146:5000/api/auth/login 处的远程资源。 （原因：CORS 请求失败）。状态码：（空）。

我使用 .NET 8 通过 Visual Studio Code 创建了这两个应用程序。当我在服务器和客户端上运行

dotnet run

时，它们都会启动，告诉我它们正在监听 localhost:5001 （客户端）和 localhost :5000（API）。我可以直接进行 api 调用，也可以使用 Blazor WASM GUI。太棒了！

现在我想将应用程序发布到 Ubuntu VM。我在虚拟机上安装了必要的软件包，克隆了 git 存储库并为每个项目运行

dotnet publish -c Release -o /some/dir

。 然后将客户端部分复制到 /var/www/html 并运行

chmod -R www-data:www-data *

。

另外我设置了 nginx，其配置如下：

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;
        }
}

我在浏览器中运行我的应用程序并且它正确启动。 我还通过运行

dotnet Server.dll

启动了我的服务器，它也可以正确启动。我可以使用 RESTed 直接进行 api 调用。但是，当我尝试在 Web 客户端上注册用户并调用 api 时，我不断在 Firefox 中收到 CORS 失败错误。

我看到服务器没有生成任何日志。直接调用api时，我可以在服务器中看到日志。

我的 api 的 Program.cs 中有以下代码片段：

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

以及下文：

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

在 blazor Program.cs 中，我像这样创建了 HttpClient：

//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) });

我尝试了注释掉的行及其下面的行。我创建了一个环境变量

ApiBaseUrl

，其中也包含相同的网址。

服务器是否运行并不重要：我收到相同的 CORS 错误，但找不到错误。看起来客户端根本无法联系服务器，尽管它们是同一台机器。

哦对了，这是失败的 OPTIONS 方法的标头内容：

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

服务器上没有运行防火墙。这是 Ubuntu Server LTS 24.04 的全新安装。

那么我做错了什么？我是否缺少配置文件、环境变量等？

Answer 1

我找到了一个对我有用的解决方案。

首先我替换了这一行：

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

反对这个

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

然后我将以下块添加到我的 nginx 配置中：

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;
        }