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

Posted 2023-03-04

【中文标题】Firefox 上的 ASP.NET Core Web API CORS 错误，但在 Chrome 上没问题

【英文标题】：ASP.NET Core Web API CORS error on Firefox but okay on 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 会很高兴

【参考方案1】：

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

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