ASP.NET Core Web API 2.0+Angular5跨域请求每次新建Session问题求助

这个问题我之前也碰到过，核心原因是跨域请求时浏览器的同源策略限制，加上ASP.NET Core Session和CORS配置的细节没处理到位，咱们一步步来解决：

1. 确保ASP.NET Core Session配置正确 #

首先要确认你的项目已经正确启用并配置了Session，跨域场景下Cookie的SameSite属性是关键：

在Startup.cs的ConfigureServices方法中添加Session服务：

services.AddSession(options =>
{
    options.IdleTimeout = TimeSpan.FromMinutes(30); // 设置Session超时时间
    options.Cookie.HttpOnly = true; // 防止前端JS访问Cookie，提升安全性
    // 跨域场景下必须将SameSite设为None，否则浏览器不会携带Cookie
    options.Cookie.SameSite = SameSiteMode.None;
    // 生产环境建议设为Always（仅HTTPS），开发环境可以用SameAsRequest
    options.Cookie.SecurePolicy = CookieSecurePolicy.SameAsRequest;
});

然后在Configure方法中按正确顺序注册中间件（顺序非常重要）：

public void Configure(IApplicationBuilder app, IWebHostEnvironment env)
{
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
        app.UseSwagger();
        app.UseSwaggerUI();
    }

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

    // 必须在UseCors之前调用UseSession
    app.UseSession();

    // 启用CORS策略
    app.UseCors("MyPolicy");

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

    app.UseEndpoints(endpoints =>
    {
        endpoints.MapControllers();
    });
}

2. 修正CORS配置的关键问题 #

你当前的CORS配置用了AllowAnyOrigin()，但当设置AllowCredentials()为true时，浏览器不允许Access-Control-Allow-Origin为*，这会导致浏览器拒绝保存Session Cookie，进而每次请求都新建Session。需要改为指定具体的Angular域名：

services.AddCors(o => o.AddPolicy("MyPolicy", builder => 
{
    // 替换成你的Angular应用实际域名，比如开发环境的http://localhost:4200
    builder.WithOrigins("http://localhost:4200")
           .AllowAnyMethod()
           .AllowCredentials()
           .AllowAnyHeader();
    // 多个域名可以用逗号分隔：WithOrigins("http://localhost:4200", "https://your-production-domain.com")
}));

3. Angular端配置请求携带Credentials #

Angular的HTTP请求默认不会携带Cookie，需要显式设置withCredentials: true，这样浏览器才会在跨域请求时带上Session Cookie：

单请求配置 #

import { HttpClient } from '@angular/common/http';

constructor(private http: HttpClient) {}

addToCart(cartItem: any) {
    return this.http.post('/api/cart/add', cartItem, { withCredentials: true });
}

全局配置（推荐） #

如果所有请求都需要携带Credentials，可以通过拦截器全局设置：

import { Injectable } from '@angular/core';
import { HttpInterceptor, HttpRequest, HttpHandler } from '@angular/common/http';

@Injectable()
export class CredentialsInterceptor implements HttpInterceptor {
    intercept(req: HttpRequest<any>, next: HttpHandler) {
        // 克隆请求并添加withCredentials配置
        const modifiedReq = req.clone({ withCredentials: true });
        return next.handle(modifiedReq);
    }
}

然后在AppModule的providers中注册拦截器：

import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http';

@NgModule({
    imports: [HttpClientModule],
    providers: [
        { 
            provide: HTTP_INTERCEPTORS, 
            useClass: CredentialsInterceptor, 
            multi: true 
        }
    ]
})
export class AppModule {}

4. 验证Session共享状态 #

你可以在CartController中添加一个测试接口，用来验证Session是否正常共享：

[HttpGet("test-session")]
public IActionResult TestSession()
{
    var sessionId = HttpContext.Session.Id;
    var cartCount = HttpContext.Session.GetInt32("CartCount") ?? 0;
    HttpContext.Session.SetInt32("CartCount", cartCount + 1);
    
    return Ok(new 
    { 
        SessionId = sessionId, 
        CurrentCartCount = cartCount + 1 
    });
}

从Angular端多次调用这个接口，如果返回的SessionId保持不变，CurrentCartCount持续递增，就说明Session已经正常跨域共享了。

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