C# API对接React跨域请求遭CORS拦截问题求助

你的核心问题有两个：一是跨域预检OPTIONS请求访问Login.aspx时返回405未被处理，二是未登录时的重定向不符合前端跨域需求。以下是针对性的解决步骤：

1. 全局处理所有OPTIONS预检请求 #

因为Login.aspx是ASPX页面，默认不会处理OPTIONS请求，而之前的CORS配置可能只覆盖了API控制器路径。需要在Global.asax.cs的Application_BeginRequest中统一拦截所有OPTIONS请求，返回合法的CORS响应：

protected void Application_BeginRequest()
{
    if (Request.HttpMethod.Equals("OPTIONS", StringComparison.OrdinalIgnoreCase))
    {
        // 设置CORS响应头，允许指定源的跨域请求
        Response.StatusCode = (int)HttpStatusCode.OK;
        Response.AddHeader("Access-Control-Allow-Origin", "http://localhost:1337");
        Response.AddHeader("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, OPTIONS");
        Response.AddHeader("Access-Control-Allow-Headers", "Content-Type, Authorization");
        Response.AddHeader("Access-Control-Allow-Credentials", "true");
        Response.End();
    }
}

这段代码会直接处理所有路径的OPTIONS请求，返回200状态码，避免出现405错误。

2. 拦截认证重定向，针对跨域请求返回JSON响应 #

默认的认证重定向会触发浏览器对Login.aspx的跨域请求，不符合你期望的返回JSON需求。可以在Global.asax.cs的Application_EndRequest中拦截重定向响应，判断是否为跨域请求，替换为JSON输出：

protected void Application_EndRequest()
{
    // 检测是否是指向Login.aspx的302重定向
    if (Response.StatusCode == (int)HttpStatusCode.Redirect && 
        !string.IsNullOrEmpty(Response.RedirectLocation) && 
        Response.RedirectLocation.Contains("Login.aspx"))
    {
        // 获取请求的Origin头，判断是否为跨域请求
        var requestOrigin = Request.Headers["Origin"];
        if (!string.IsNullOrEmpty(requestOrigin) && requestOrigin == "http://localhost:1337")
        {
            // 清空原有重定向响应
            Response.Clear();
            // 返回401未授权状态码
            Response.StatusCode = (int)HttpStatusCode.Unauthorized;
            Response.ContentType = "application/json";
            // 再次设置CORS头确保前端能正常接收响应
            Response.AddHeader("Access-Control-Allow-Origin", requestOrigin);
            Response.AddHeader("Access-Control-Allow-Credentials", "true");
            // 输出包含认证URL的JSON内容
            var authLoginUrl = "http://localhost:9074/Login.aspx";
            Response.Write($"{{\"isUnauthorized\": true, \"loginUrl\": \"{authLoginUrl}\"}}");
            Response.End();
        }
    }
}

3. 前端配合说明 #

在React发送请求时，需要开启withCredentials（如果你的认证依赖Cookie），确保CORS请求能正确携带凭证：

fetch('http://localhost:9074/Customer/GetAll/', {
  method: 'GET',
  credentials: 'include' // 对应后端的Access-Control-Allow-Credentials: true
})
.then(response => {
  if (response.status === 401) {
    return response.json().then(data => {
      // 这里可以跳转到data.loginUrl，或者处理前端登录逻辑
      window.location.href = data.loginUrl;
    });
  }
  return response.json();
})
.catch(error => console.error('请求错误:', error));

关键逻辑说明 #

• OPTIONS请求处理：覆盖所有路径（包括ASPX页面），确保预检请求能得到200响应，通过CORS校验。
• 重定向拦截：利用Application_EndRequest在响应发送前修改结果，针对跨域请求返回JSON而非重定向，既满足前端需求，又保留非跨域场景下的重定向行为。

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