如何解决.NET Core配置CORS后localhost前端跨域请求失败问题

问题根因 #

核心问题是HTTPS重定向中间件顺序错误，拦截了HTTP源的CORS请求：
你将app.UseHttpsRedirection()放在了app.UseCors()之前，http://localhost:8100 是HTTP源，访问HTTPS接口时第一步就会触发重定向，而CORS预检OPTIONS请求不会携带身份凭据，重定向后CORS响应头未正常返回，直接触发跨域拦截。而https://apirequest.io本身是HTTPS站点，访问你的HTTPS接口不会触发重定向，因此CORS规则正常生效，请求可以正常通过。

解决方案 #

方案一：调整.NET Core配置（无需修改Ionic，推荐开发环境使用） #

1. 调整中间件顺序，将CORS中间件放在HTTPS重定向之前，开发环境可直接禁用HTTPS重定向：

app.UseRouting();
// CORS必须放在UseRouting之后、鉴权中间件之前
app.UseCors();
// 仅生产环境开启HTTPS重定向
if (!app.Environment.IsDevelopment())
{
    app.UseHttpsRedirection();
}
app.UseAuthentication();
app.UseAuthorization();

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

2. 如果前端请求会携带凭据（Cookie、Authorization头等），需要在CORS策略中新增允许凭据的配置：

services.AddCors(opciones =>
{
    opciones.AddDefaultPolicy(builder =>
    {
        builder.WithOrigins("http://localhost:8100", "https://apirequest.io", "https://localhost:8100")
        .AllowAnyMethod()
        .AllowAnyHeader()
        // 新增这行即可
        .AllowCredentials();
    });
});

修改完成后重启后端服务，清空浏览器缓存即可正常请求。

方案二：为Ionic配置HTTPS运行环境 #

如果需要统一前后端HTTPS协议，可通过启动参数直接开启Ionic的HTTPS服务，无需复杂配置：

1. 临时开启HTTPS启动，直接执行命令：
   ionic serve --ssl
2. 如果需要固定配置，可修改angular.json中serve节点的配置，后续直接执行ionic serve即可自动使用HTTPS：

{
  "projects": {
    "你的项目名称": {
      "architect": {
        "serve": {
          "options": {
            "ssl": true
            // 如需自定义证书可新增以下两个配置
            // "sslCert": "你的证书路径.crt",
            // "sslKey": "你的私钥路径.key"
          }
        }
      }
    }
  }
}

内容的提问来源于stack exchange，提问作者francisco Mc Manus