I have a React and ASP.NET Core 2.2 SPA that has a CORS issue with Firefox but is okay in Chrome and Edge. I've created a little test rig that consists of the ASP.NET Core 2.2 Web API template with CORS enabled and a Create React App that uses fetch
to call the web API.
Here's the ASP.NET Core Startup.cs
with CORS enabled:
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();
}
Here's the React page that requests the data:
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>
}
This works fine in Chrome and Edge but I get the following error in Firefox:
Am I enabling CORS correctly? or am I missing something else? Any help appreciated.
On FireFox, the protocols must match for CORS policy origins. If your WebAPI has app.UseHttpsRedirection();
configured and your react app is being served from non SSL, you will get a CORS block. So either:
app.UseHttpsRedirection();
in dev/local environmentJust to add another facet to this...
I had a case where Firefox would give me a CORS error when calling a specific controller, but would work fine on other controllers in the same WebAPI instance.
What I found was on the 'problem' controller, it was actually throwing an exception. The exception in this case it was a 'Microsoft.AspNetCore.Routing.Matching.AmbiguousMatchException'. When I fixed the problem, the CORS errors went away. Probably other server-level exceptions would cause the same thing.
Who knows why FF would interpret an exception as a CORS error...
I know this question is old but I faced the same problem right now and my solution was not mentioned above.
Currently Firefox is very restrictive with self-signed development SSL certificates. So if you run both API and SPA frontend in SSL mode:
Make sure both are opened in Firefox and add exceptions for both developer certificates!
In my case I had the API only opened in Chrome and so the exception was still missing in Firefox. Hence the SSL-connection failed.
I have a React and ASP.NET Core 2.2 SPA that has a CORS issue with Firefox but is okay in Chrome and Edge. I've created a little test rig that consists of the ASP.NET Core 2.2 Web API template with CORS enabled and a Create React App that uses fetch
to call the web API.
Here's the ASP.NET Core Startup.cs
with CORS enabled:
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();
}
Here's the React page that requests the data:
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>
}
This works fine in Chrome and Edge but I get the following error in Firefox:
Am I enabling CORS correctly? or am I missing something else? Any help appreciated.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.