Firefox 上的 ASP.NET Core Web API CORS 错误，但在 Chrome 上没问题

Question

我有一个 React 和 ASP.NET Core 2.2 SPA，它在 Firefox 中存在 CORS 问题，但在 Chrome 和 Edge 中还可以。 我创建了一个小测试平台，其中包含启用了 CORS 的 ASP.NET Core 2.2 Web API 模板和一个使用fetch调用 Web API 的 Create React App。

这是启用了 CORS 的 ASP.NET Core Startup.cs ：

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
    services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
    {
        builder.AllowAnyMethod().AllowAnyHeader().AllowCredentials().WithOrigins("http://localhost:3000");
    }));
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseCors("CorsPolicy");
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseMvc();
}

这是请求数据的 React 页面：

const App: React.FC = () => {
  const [data, setData] = useState("loading ...")  
  useEffect(()=>{
    fetch("https://localhost:44335/api/values").then(res=>res.json()).then(body=>{
      setData(JSON.stringify(body));
    })
  },[]);
  return <p>{data}</p>
}

这在 Chrome 和 Edge 中运行良好，但在 Firefox 中出现以下错误：

我是否正确启用了 CORS？ 还是我错过了其他东西？ 任何帮助表示赞赏。

Answer 1

在 FireFox 上，协议必须与 CORS 策略来源相匹配。 如果你的 WebAPI 有app.UseHttpsRedirection(); 配置并且您的反应应用程序正在从非 SSL 提供服务，您将获得一个 CORS 块。 所以要么：

• 禁用app.UseHttpsRedirection(); 在开发/本地环境中
• 使用 SSL 托管您的开发/本地反应应用程序
• 在 iis express 中为 WebAPI 启用 SSL

Answer 2

只是为了增加另一个方面......

我有一个案例，Firefox 在调用特定控制器时会给我一个 CORS 错误，但在同一个 WebAPI 实例中的其他控制器上可以正常工作。

我发现在“问题”控制器上，它实际上是在抛出异常。 这种情况下的例外是“Microsoft.AspNetCore.Routing.Matching.AmbiguousMatchException”。 当我解决问题时，CORS 错误就消失了。 可能其他服务器级别的异常会导致同样的事情。

谁知道为什么 FF 会将异常解释为 CORS 错误...

Answer 3

我知道这个问题很老，但我现在面临同样的问题，上面没有提到我的解决方案。

目前 Firefox 对自签名开发 SSL 证书的限制非常严格。 因此，如果您在 SSL 模式下同时运行 API 和 SPA 前端：

确保两者都在 Firefox 中打开，并为两个开发者证书添加例外！

就我而言，我只在 Chrome 中打开了 API，因此在 Firefox 中仍然缺少异常。 因此 SSL 连接失败。

Answer 4

我有一个React和ASP.NET Core 2.2 SPA，在Firefox中存在CORS问题，但在Chrome和Edge中可以。 我创建了一个小的测试装置，该装置由启用了CORS的ASP.NET Core 2.2 Web API模板和一个使用fetch调用Web API的Create React App组成。

这是启用了CORS的ASP.NET Core Startup.cs ：

public void ConfigureServices(IServiceCollection services)
{
    services.AddMvc().SetCompatibilityVersion(CompatibilityVersion.Version_2_2);
    services.AddCors(o => o.AddPolicy("CorsPolicy", builder =>
    {
        builder.AllowAnyMethod().AllowAnyHeader().AllowCredentials().WithOrigins("http://localhost:3000");
    }));
}

public void Configure(IApplicationBuilder app, IHostingEnvironment env)
{
    app.UseCors("CorsPolicy");
    if (env.IsDevelopment())
    {
        app.UseDeveloperExceptionPage();
    }
    else
    {
        app.UseHsts();
    }

    app.UseHttpsRedirection();
    app.UseMvc();
}

这是请求数据的React页面：

const App: React.FC = () => {
  const [data, setData] = useState("loading ...")  
  useEffect(()=>{
    fetch("https://localhost:44335/api/values").then(res=>res.json()).then(body=>{
      setData(JSON.stringify(body));
    })
  },[]);
  return <p>{data}</p>
}

在Chrome和Edge中可以正常工作，但是在Firefox中出现以下错误：

我可以正确启用CORS吗？ 还是我想念其他东西？ 任何帮助表示赞赏。