使用single-spa整合.NET MVC与Angular微前端遇CORS问题求助

一、核心原因 #

single-spa基座应用与.NET MVC子应用运行在不同端口，属于跨域场景，浏览器的同源策略会拦截跨域资源请求，需要在.NET MVC端配置CORS策略允许基座应用的访问。

二、针对不同.NET版本的CORS配置方案 #

1. .NET Core MVC（.NET 6+）

在Program.cs中添加并启用CORS服务，指定允许基座应用的源地址（替换为你实际的基座运行地址，比如http://localhost:3000）：

var builder = WebApplication.CreateBuilder(args);

// 注册CORS策略
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowSingleSpaOrigin", policy =>
    {
        policy.WithOrigins("http://localhost:3000") // 替换为基座应用地址
              .AllowAnyMethod()
              .AllowAnyHeader()
              .AllowCredentials(); // 允许携带Cookie等凭据
    });
});

builder.Services.AddControllersWithViews();

var app = builder.Build();

// 启用CORS（必须放在UseRouting之后，UseAuthorization之前）
app.UseCors("AllowSingleSpaOrigin");

app.UseRouting();
app.UseAuthorization();

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

app.Run();

2. .NET Framework MVC（MVC 5及以下）

1. 先安装NuGet包：

Install-Package Microsoft.AspNet.WebApi.Cors

2. 在App_Start/WebApiConfig.cs中配置CORS：

using System.Web.Http;

namespace YourMvcAppNamespace
{
    public static class WebApiConfig
    {
        public static void Register(HttpConfiguration config)
        {
            // 配置允许基座访问的CORS规则
            var corsAttribute = new EnableCorsAttribute("http://localhost:3000", "*", "*");
            config.EnableCors(corsAttribute);

            // 其他WebAPI路由配置
            config.MapHttpAttributeRoutes();
            config.Routes.MapHttpRoute(
                name: "DefaultApi",
                routeTemplate: "api/{controller}/{id}",
                defaults: new { id = RouteParameter.Optional }
            );
        }
    }
}

3. 额外在Web.config的<system.webServer>节点添加全局跨域响应头：

<system.webServer>
  <httpProtocol>
    <customHeaders>
      <add name="Access-Control-Allow-Origin" value="http://localhost:3000" />
      <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
      <add name="Access-Control-Allow-Headers" value="Content-Type, Authorization" />
      <add name="Access-Control-Allow-Credentials" value="true" />
    </customHeaders>
  </httpProtocol>
</system.webServer>

三、调整single-spa对.NET MVC的导入配置 #

直接指向.NET MVC根域名的配置方式不适用于服务器渲染应用，需要适配single-spa的生命周期：

1. 在.NET MVC的Home/Index页面中添加脚本，导出single-spa所需的生命周期函数：

<script type="module">
  // 处理single-spa路由导航
  window.singleSpaNavigate = (location) => {
    window.location.href = location.pathname;
  };

  // 导出single-spa生命周期函数
  export function bootstrap(props) {
    return Promise.resolve();
  }

  export function mount(props) {
    // 挂载时的初始化逻辑
    return Promise.resolve();
  }

  export function unmount(props) {
    // 卸载时的资源清理逻辑
    return Promise.resolve();
  }
</script>

2. 更新基座的importmap，指向该页面的脚本（或打包后的资源）：

<script type="systemjs-importmap">
  {
    "imports": {
      "@single-spa/welcome": "https://unpkg.com/single-spa-welcome/dist/single-spa-welcome.js",
      "@angular-app/angular-project": "http://localhost:9002/main.js",
      "@dotnet/home":"http://localhost:7166/home/index.js" // 替换为实际脚本路径
    }
  }
</script>

四、验证与调试 #

1. 打开浏览器控制台，查看具体的CORS错误信息，确认是预检请求（OPTIONS）还是资源请求被拦截，针对性调整CORS策略。
2. 确保所有.NET MVC的静态资源（CSS、JS、图片）都能被跨域访问，必要时在CORS配置中添加对应的允许规则。

内容的提问来源于stack exchange，提问作者I'm nidhin