部署ASP.NET Core+React Vite应用时Axios请求404问题排查

问题概述 #

我开发了一个全栈Web API应用：

• 前端：ASP.NET Core 结合 React.js（基于Vite）
• 后端：C#类库
• 已将前端部署到IIS的localhost:80，前端能正常显示自定义加载图标，但加载无法完成——所有axios请求（比如/api/account/getcurrentuser）都返回404错误。服务器提示找不到资源，物理路径指向C:\Website\EDIConverterDemo\wwwroot\api\account\getcurrentuser，不确定路径是否正确，还是路由配置有误。

本地开发环境（非IIS）运行完全正常，控制器路由与axios请求URL完全匹配。曾以为需要单独部署后端类库，但资料显示无需单独部署，最初怀疑是React(Vite)的问题，现在认为问题出在API部署部分。

相关配置代码 #

1. Vite配置文件（vite.config.js） #

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    strictPort : true,
    proxy: {
      '/api' : {
        target: 'https://localhost:7264',
        changeOrigin: true,
        secure: false,
        rewrite: (path) => path.replace(/^\/api/, '/api')
      }
    }
  }
})

本地运行时，React在3000端口，所有/api开头的请求会转发到7264端口的控制器，不确定部署后是否需要修改代理配置。

2. API控制器代码（AccountController.cs） #

namespace EDIConverterWeb.Web.Controllers
{
    [Route("api/[controller]")]
    [ApiController]
    public class AccountController : ControllerBase
    {
        [HttpGet]
        [Route("getcurrentuser")]
        public User GetCurrentUser()
        {
            // 未登录返回null，否则返回当前登录用户对象的逻辑
        }
    }
}

3. Program.cs配置 #

namespace EDIConverterWeb.Web
{
    public class Program
    {
        private static string CookieScheme = "EDIConverter";
        public static void Main(string[] args)
        {
            var builder = WebApplication.CreateBuilder(args);

            builder.Services.AddAuthentication(CookieScheme)
           .AddCookie(CookieScheme, options =>
           {
               options.Events = new CookieAuthenticationEvents
               {
                   OnRedirectToLogin = context =>
                   {
                       context.Response.StatusCode = 403;
                       context.Response.ContentType = "application/json";
                       var result = System.Text.Json.JsonSerializer.Serialize(new { error = "You are not authenticated" });
                       return context.Response.WriteAsync(result);
                   }
               };
           });

            builder.Services.AddSession();

            // 添加服务到容器
            builder.Services.AddControllersWithViews();

            var app = builder.Build();

            // 配置HTTP请求管道
            if (!app.Environment.IsDevelopment())
            {
                // 默认HSTS值为30天，生产环境可修改，详见https://aka.ms/aspnetcore-hsts
                app.UseHsts();
            }

            app.UseHttpsRedirection();
            app.UseStaticFiles();
            app.UseRouting();

            app.UseSession();
            app.UseAuthentication();
            app.UseAuthorization();

            app.MapControllerRoute(
                name: "default",
                pattern: "{controller}/{action=Index}/{id?}");

            app.MapFallbackToFile("index.html"); ;

            app.Run();
        }
    }
}

4. web.config配置 #

<?xml version="1.0"?>
<configuration>
    <system.webServer>
        <rewrite>
            <rules>
                <rule name="React Routes" stopProcessing="true">
                    <match url=".*" />
                    <conditions logicalGrouping="MatchAll">
                        <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                        <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
                        <add input="{REQUEST_URI}" pattern="^/(api)" negate="true" />
                    </conditions>
                    <action type="Rewrite" url="/" />
                </rule>
            </rules>
        </rewrite>
    </system.webServer>
</configuration>

更新说明 #

现在排除React的问题，希望解决部署后API部分的运行问题。

核心问题分析 #

部署后API请求返回404，是因为ASP.NET Core的API路由没有被正确映射，同时Vite的代理配置仅在开发环境生效，部署后前端请求直接发送到IIS的80端口，而该端口的ASP.NET Core应用未正确处理API路由。

具体修复步骤 #

1. 修正Program.cs中的API路由映射 #

当前Program.cs仅配置了MVC默认路由，未显式映射API控制器，导致API请求无法被识别。需添加MapControllers()：

// 在app.MapControllerRoute之后添加
app.MapControllers();

修改后的关键代码片段：

app.MapControllerRoute(
    name: "default",
    pattern: "{controller}/{action=Index}/{id?}");

// 新增：显式映射API控制器
app.MapControllers();

app.MapFallbackToFile("index.html");

2. 确认后端类库引用与程序集扫描 #

确保Web项目已正确引用后端C#类库，若控制器位于类库中，需在Program.cs添加程序集扫描：

builder.Services.AddControllersWithViews()
    .AddApplicationPart(typeof(AccountController).Assembly); // 替换为类库中控制器的实际类型

3. 优化Vite代理配置（可选） #

Vite的rewrite配置冗余（/api替换为/api无实际作用），可删除：

proxy: {
  '/api' : {
    target: 'https://localhost:7264',
    changeOrigin: true,
    secure: false
    // 移除rewrite配置
  }
}

注意：该代理仅在开发环境（vite dev）生效，部署后前端为静态文件，请求直接发向当前域名，无需此配置。

4. 验证IIS部署配置 #

• 确保IIS应用程序池的.NET CLR版本设置为无托管代码（ASP.NET Core为自托管模式）。
• 确认部署文件夹包含完整的ASP.NET Core应用文件（如EDIConverterWeb.Web.dll等后端文件），而非仅前端静态资源。

5. 测试API路由 #

部署完成后，直接访问http://localhost:80/api/account/getcurrentuser，若返回预期结果（如null或用户对象），说明API路由配置正确。

内容的提问来源于stack exchange，提问作者Anonymous