I'm trying to enable CORS but I constantly have the same problem for each request sent from my AngularJS web app:
Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://.../... (Reason: CORS header 'Access-Control-Allow-Origin' missing).
And it only occurs with Firefox! It works perfectly with Chrome, Safari, IE and Edge.
Environment:
My API is a .NET Web Api 2.3 (.NET 4.6) hosted on Azure App Services (IIS 8.0).
My front app is a AngularJS webapp that I access via https and which consumes the API via https.
What I did: I have a Startup class which is declared as the startup entry point for Owin.
[assembly: OwinStartup(typeof(Startup))]
namespace SentinelleApi
{
public class Startup
{
public void Configuration(IAppBuilder app)
{
app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
app.Map("/signalr", map =>
{
map.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
var hubConfiguration = new HubConfiguration
{
EnableDetailedErrors = true,
EnableJavaScriptProxies = false
};
map.RunSignalR(hubConfiguration);
});
HttpConfiguration config = new HttpConfiguration();
WebApiConfig.Register(config);
app.UseWebApi(config);
}
}
}
I have a WebApiConfig class which is declared as below:
namespace SentinelleApi
{
public static class WebApiConfig
{
public static void Register(HttpConfiguration config)
{
// No need to declare config.EnableCors() here, the app.UseCors(...) does the job in startup section
// Web API routes
config.MapHttpAttributeRoutes();
config.Routes.MapHttpRoute(
name: "DefaultApi",
routeTemplate: "api/{controller}/{id}",
defaults: new {id = RouteParameter.Optional}
);
}
}
}
I did not touch web.config to manually add headers (I tried, but it didn't solve my problem). Anyway, it's not recommended to add these headers in web.config and to have app.UseCors() at the same time.
So, on Firefox, I have the CORS error, but on Safari/Chrome, no problem!
I have the Access-Control-Allow-Origins everywhere except Firefox.
On Chrome:
On Firefox:
EDIT: Well, I've investigated a bit more, and if I switch my webapp address from https:// to http://, everything works fine on Firefox (also, my API can be consumed by Angular via https with no CORS problem at all) ...
I really don't understand what's going on, but magically, Access-Control-Allow-Origin appears on every API routes consumed by Firefox, which was not the case when it was a secure connection (https). I rely on https Azure certificate from Microsoft, which seems to be valid (the lock icon is green).
Of course, I would like to keep https, but I don't know how I can solve my issue.
Seems to be related to: Firefox CORS request giving 'Cross-Origin Request Blocked' despite headers
I've made a rewrite rule regarding the web app client (which hosts AngularJS). In my web.config, I have:
<rule name="RedirectToHTTPS" stopProcessing="true">
<match url="(.*)" />
<conditions>
<add input="{HTTPS}" pattern="off" ignoreCase="true" />
<add input="{URL}" pattern="/$" negate="true" />
<add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
</conditions>
<action type="Redirect" url="https://{SERVER_NAME}/{R:1}" redirectType="SeeOther" />
</rule>
When I remove it, it's fine (my web app is accessible using HTTP), but when I switch to HTTPS, and even though the API server accept all origins, it fails.
So the question: Should I add something special to make HTTPS/Certificate works with CORS (under Firefox)?
Also related: https://stackoverflow.com/questions/33743645/iis-reverse-proxy-to-bypass-cors-issue
