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();，并且您的React应用正在通过非SSL进行服务，则将获得CORS块。所以：

• 在开发人员/本地环境中禁用app.UseHttpsRedirection();
• 使用SSL托管您的开发/本地React应用
• iis express中针对WebAPI的SSL转换

Answer 2

右键单击项目->属性->调试->取消选中启用SSL