通过ASP.NET Core SPA代理无法在API域名下提供Vue.js服务求助

阿华AIGC实验室

2026-6-12

解决方案：ASP.NET Core + Vue 开发环境同一端口部署

问题根源

你遇到的跳转问题是因为启用了Microsoft.AspNetCore.SpaProxy组件，它会自动将请求重定向到Vite开发服务器端口。要实现同一端口提供客户端和API服务，需要移除SpaProxy，改用反向代理让ASP.NET Core直接转发客户端请求到Vite，同时保留Swagger和API路由。

步骤1：移除SpaProxy配置

打开服务端项目的launchSettings.json，删除以下环境变量配置：

"ASPNETCORE_HOSTINGSTARTUPASSEMBLIES": "Microsoft.AspNetCore.SpaProxy"

步骤2：安装反向代理依赖

在服务端项目中安装NuGet包Yarp.ReverseProxy（ASP.NET Core官方推荐的反向代理工具）：

Install-Package Microsoft.AspNetCore.Yarp.ReverseProxy

步骤3：配置服务端代理及路由

修改Program.cs，调整中间件顺序，确保Swagger、API优先处理，剩余请求转发到Vite：

var builder = WebApplication.CreateBuilder(args);

// 注册Swagger服务
builder.Services.AddEndpointsApiExplorer();
builder.Services.AddSwaggerGen();

// 注册反向代理服务
builder.Services.AddReverseProxy()
    .LoadFromConfig(builder.Configuration.GetSection("ReverseProxy"));

// 注册Controllers服务
builder.Services.AddControllers();

var app = builder.Build();

// 开发环境启用Swagger
if (app.Environment.IsDevelopment())
{
    app.UseSwagger();
    app.UseSwaggerUI();
}

app.UseHttpsRedirection();
app.UseAuthorization();

// 优先处理API路由
app.MapControllers();

// 开发环境：代理非API/非Swagger请求到Vite服务器
if (app.Environment.IsDevelopment())
{
    app.MapReverseProxy();
}
else
{
    // 生产环境：使用打包后的静态文件
    app.UseDefaultFiles();
    app.UseStaticFiles();
    app.MapFallbackToFile("/index.html");
}

app.Run();

在appsettings.Development.json中添加反向代理规则，过滤掉API和Swagger相关请求：

"ReverseProxy": {
  "Routes": {
    "spaRoute": {
      "ClusterId": "spaCluster",
      "Match": {
        "Path": "{**catch-all}",
        "Hosts": ["localhost:7052"]
      },
      "Filters": [
        {
          "Name": "RouteCondition",
          "Arguments": {
            "Condition": "!Path.StartsWith(\"/api\") && !Path.StartsWith(\"/swagger\") && !Path.StartsWith(\"/swagger-ui\")"
          }
        }
      ]
    }
  },
  "Clusters": {
    "spaCluster": {
      "Destinations": {
        "spaDestination": {
          "Address": "https://localhost:53223"
        }
      }
    }
  }
}

步骤4：调整Vite配置

修改客户端vite.config.js，将API代理目标改为服务端端口，同时设置Origin确保资源路径正确：

server: {
    proxy: {
        "/api": {
            target: "https://localhost:7052", // 改为服务端监听端口
            secure: false,
            changeOrigin: true // 确保请求头Host正确
        },
    },
    port: 53223,
    https: {
        key: fs.readFileSync(keyFilePath),
        cert: fs.readFileSync(certFilePath),
    },
    origin: "https://localhost:7052" // 让Vite生成的资源路径指向服务端地址
},