.NET 4.5 ASP.NET WebForms项目整合React与ASP.NET Core 8 WebAPI方案咨询

一、并行运行方案（独立维护，无侵入） #

适合不想改动原有WebForms项目结构，希望新模块独立迭代的场景：

• 分别部署两个项目

  • 原有WebForms项目继续部署在IIS的.NET 4.5专用应用池，绑定域名路径如http://yourdomain/webforms
  • React+ASP.NET Core 8 WebAPI项目单独部署，使用.NET Core应用池，绑定路径如http://yourdomain/newmodule（React静态文件默认已集成在Core项目中，无需单独部署）

• 处理跨域与跳转

  • WebForms中跳转React模块：直接用普通超链接或JS跳转，比如 <a href="http://yourdomain/newmodule">进入新模块</a>
  • WebForms调用Core API：在Core项目的Program.cs中配置CORS规则，允许WebForms域名的请求：

    builder.Services.AddCors(options =>
    {
        options.AddPolicy("AllowWebFormsOrigin", policy =>
        {
            policy.WithOrigins("http://yourdomain/webforms")
                  .AllowAnyHeader()
                  .AllowAnyMethod();
        });
    });
    // 注意：UseCors要放在UseRouting之后，UseAuthorization之前
    app.UseCors("AllowWebFormsOrigin");
    

• 共享身份验证（可选）

  • 如果原有WebForms使用Forms认证，可在WebForms登录成功后生成JWT令牌，跳转React时通过URL参数或localStorage传递，React用该令牌调用Core API
  • 也可基于OAuth2.0实现单点登录，让两个项目共享同一身份认证体系

二、嵌入现有WebForms项目（混合部署，统一体验） #

希望用户感知为同一系统，统一域名的场景：

• 打包React静态资源
  在React项目根目录执行 npm run build，生成包含静态HTML、CSS、JS的build文件夹

• 嵌入WebForms项目

  • 将build文件夹复制到WebForms项目的指定目录，比如~/NewModule/
  • 创建空白ASPX页面（如NewModule.aspx），将React的index.html内容复制到页面的<body>标签内，同时修改静态资源路径为WebForms相对路径，使用ResolveUrl解析：

    <div id="root"></div>
    <script src='<%= ResolveUrl("~/NewModule/static/js/main.xxxx.js") %>'></script>
    <link href='<%= ResolveUrl("~/NewModule/static/css/main.xxxx.css") %>' rel="stylesheet">
    

• 部署Core API作为子应用

  • 在IIS中，将WebForms项目设为主应用，添加一个子应用程序，指向Core API的发布目录，应用池选择.NET Core专用池，子应用路径设为~/api/newmodule
  • 修改Core项目的路由前缀，与子应用路径匹配：

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

  • React中API请求地址改为相对路径，比如/api/newmodule/Users/GetList，避免跨域问题

• 避免路由冲突
  React使用哈希路由（HashRouter），避免与WebForms的服务器端路由冲突：

  import { HashRouter, Routes, Route } from 'react-router-dom';
  
  function App() {
    return (
      <HashRouter>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/detail/:id" element={<Detail />} />
        </Routes>
      </HashRouter>
    );
  }
  

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