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

【问题标题】：ASP.NET Core Web API CORS error on Firefox but okay on ChromeFirefox 上的 ASP.NET Core Web API CORS 错误，但在 Chrome 上没问题
【发布时间】：2019-10-17 17:11:55
【问题描述】：

我有一个 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？还是我错过了其他东西？任何帮助表示赞赏。

【问题讨论】：

当 reactjs/dotnet 系统都在 http 或 https 下运行时，你试过了吗？这里有一个混合协议 http 用于 reactjs 和 https 用于 dotnet core
是的，谢谢hugo，是http 和https 的混合导致了这个问题。如果我为后端和前端使用相同的协议，FF 会很高兴

标签： javascript reactjs asp.net-core cors

【解决方案1】：

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

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

【讨论】：