Azure WebApp Cors does not add Cors headers

Question

I have an Owin WebAPI2 .NET app that I host on an AppService in Azure.

I want to add CORS support using Azure as in this article. It seems simple, you just add an Origin site to the list like this: http://screencast.com/t/r2ATq4u5

I would now expect the Response headers to contain this allowed Origin.

However, the CORS headers are not included in the Response Headers when I check it with Fiddler: http://corstestqm.azurewebsites.net/breeze/restaurantsbreeze/basictest

Steps I have tried:

• Stripped out all CORS Nuget libraries from my solution and all traces of CORS code in my API project.
• Deployed to a brand new AppService
• Enabled Owin Cors AllowAll

None of these had any effect. (ie. the Response does not contain the CORS header specified in Azure).

Am I missing something really basic here?

UPDATE I simplified the problem even more: In VS2015, I created a new API project and pushed it to http://corstestbasicap2.azurewebsites.net/api/values/ with no changes (ie. it should NOT have CORS enabled).

I then use Test-Cors tool to hit that API. It does not get a CORS error as expected. I then go into Azure and add a dummy URL (e.g http://www.example.com) and try the CORS test again. It should fail as Azure should only let example.com through. However, it works fine.

I then edit CORS again in Azure and add http://www.test-cors.org below http://www.example.com (so it should let either through) and now the headers return Access-Control-Allow-Origin:http://www.test-cors.org as expected.

But this makes no sense? Surely the previous call should fail when "http://www.test-cors.org" was NOT in the allowed Origins? It does not seem to be doing anything useful?!

Answer 1

You can achieve these by adding in your web.config bellow configuration:

<system.webServer>
     <httpProtocol>
      <customHeaders>
        <add name="Access-Control-Allow-Origin" value="*"/>
        <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept,Authorization"/>
        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS"/>
      </customHeaders>
    </httpProtocol>
</system.webServer>

In global.asax:

protected void Application_BeginRequest()
{
  if (Request.Headers.AllKeys.Contains("Origin") && Request.HttpMethod == "OPTIONS")
  {
    Response.Flush();
  }
}

If you want control from portal, please view bellow image:

Note, according with App Service CORS documentation you can not use both Web API CORS and App Service CORS in one API app. You have to clean your project about Web API CORS

Don't try to use both Web API CORS and App Service CORS in one API app. App Service CORS will take precedence and Web API CORS will have no effect. For example, if you enable one origin domain in App Service, and enable all origin domains in your Web API code, your Azure API app will only accept calls from the domain you specified in Azure.

Answer 2

My problem was that I accidentally put http instead of https into Azure AD B2C custom page config blade ... After change to https it works like a charm.

CORS headers missing when deployed on Azure Web App / Azure API