Enabling CORS for Web API in Azure Web Apps

Question

I have deployed a Web API project to Azure Web app. And from a angularjs app I am trying a $http.get request to the API. but it gives a CORS(cross-origin) exception though I have enabled it in my Web API startup config

 app.UseCors(CorsOptions.AllowAll);

I want to Enable CORS for Azure Web App, that would solve the problem I believe

EDIT http://nearestbuyweb.azurewebsites.net/ this is the URL of the Web app. It is trying to access http://nearestbuyapi.azurewebsites.net/api/MenuBar where the exception occurs.

I think it is not possible with Azure Web App. MSDN Question

Please help!

Just to clarify, do you get the CORS exception when your site tries to make an API call to a 2nd site, or do you get it when a 2nd site tries to make an API call to your site? Enabling CORS on your site will only enable the 1st scenario. — Zain Rizvi, Jul 07 '15 at 16:30
when I access Web api from my Web project I get the error. I want to basically enable CORS for Azure Web app — Dhanilan, Jul 07 '15 at 17:35

score 3 · Answer 1 · answered Jul 08 '15 at 18:50

3

Note: You use CORS settings to let other websites access your site's API. Not to access other site's APIs.

Based on your comments it sounds like you're getting the CORS error when you try to make external requests from your site. That's exactly the behavior CORS is supposed to block.

For the errors to go away you would have to apply the CORS config settings on the site who's API you're trying to access.

In your case you want to make sure you're applying the config changes on the http://nearestbuyapi.azurewebsites.net site. NOT on http://nearestbuyweb.azurewebsites.net/

answered Jul 08 '15 at 18:50

Zain Rizvi

23,586
22
91
133

That is what I am doing @Zain – Dhanilan Jul 09 '15 at 01:37
"That's exactly the behavior CORS is supposed to block." - It's not CORS that is preventing your browser from viewing the response, it's the same-origin-policy (SOP). CORS is basically just a bunch of headers you can use to relax the SOP. – David Klempfner Jun 30 '21 at 05:27

Thiago Custodio · Answer 2 · 2015-07-07T12:27:15.967

2

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

edited Jul 07 '15 at 12:27

answered Jul 07 '15 at 12:13

Thiago Custodio

17,332
6
45
90

try a request using fiddler or postman for example, and check if it works. I'm using exactly those configuration and is working fine. – Thiago Custodio Jul 07 '15 at 12:27
when I access it without origin i.e type the URL in chrome as well as fiddler it works. – Dhanilan Jul 07 '15 at 17:34

score 2 · Answer 3 · answered Jul 07 '15 at 17:49

2

I have CORS in Azure working using this:

WebApiConfig.cs:

public static class WebApiConfig
{
    public static void Register(HttpConfiguration config)
    {
        // Web API configuration and services
        config.EnableCors();

        // Web API routes
        config.MapHttpAttributeRoutes();

        config.Routes.MapHttpRoute(
            name: "PublicApi",
            routeTemplate: "api/v1/{controller}/{id}",
            defaults: new { id = RouteParameter.Optional }
        );

    }
}

Web.config:

  <system.webServer>
  <handlers>
      <remove name="ExtensionlessUrlHandler-Integrated-4.0" />
      <remove name="OPTIONSVerbHandler" />
      <remove name="TRACEVerbHandler" />
      <add name="ExtensionlessUrlHandler-Integrated-4.0" path="*." verb="*" type="System.Web.Handlers.TransferRequestHandler" preCondition="integratedMode,runtimeVersionv4.0" />
    </handlers></system.webServer>

answered Jul 07 '15 at 17:49

Luke Baughan

4,658
3
31
54

1

Thanks @buKaneer even I am doing the same configuration. It works perfectly in my local machine ( API and Web hosted in IIS as separate applications), but when I publish to azure It doesn't work . – Dhanilan Jul 08 '15 at 05:35
Did you deploy your WebApi to Azure Web App or Mobile Services or cloud services ? – Dhanilan Jul 08 '15 at 08:57
Its a web site hosted on Azure here's the link http://get-json.azurewebsites.net/ CORS calls are made from here http://codepen.io/collection/XzVOeX/ – Luke Baughan Jul 08 '15 at 09:15
so get-json.azurewebsites.net is hosted on Azure , but CORS calls are made to codepen which is not in Azure ? For me CORS calls need to be made to Web Api which is deployed to azure – Dhanilan Jul 08 '15 at 09:29
You can make a CORS call from any website to get JSON (which is hosted on azure). – Luke Baughan Jul 08 '15 at 09:40
but that's not happening – Dhanilan Jul 08 '15 at 09:41
XMLHttpRequest cannot load http://nearestbuyapi.azurewebsites.net/api/MenuBar. The 'Access-Control-Allow-Origin' header contains multiple values 'http://s.codepen.io, http://nearestbuyweb:80', but only one is allowed. Origin 'http://s.codepen.io' is therefore not allowed access. – Luke Baughan Jul 08 '15 at 10:01
Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/82686/discussion-between-dhanilan-and-bukaneer). – Dhanilan Jul 08 '15 at 10:15
I was unable to get CORS in Azure to work as expected - if anyone was able to, please see https://stackoverflow.com/questions/41541917/azure-webapp-cors-does-not-add-cors-headers – Rodney Jan 09 '17 at 13:10

score 1 · Answer 4 · answered Jul 07 '15 at 12:52

1

You need to remove the options handler in IIS using web.config. http://eugeneagafonov.com/post/38312919044/iis-options-cors-aspnet-webapi-en

answered Jul 07 '15 at 12:52

dcinzona

477
2
14

I am using Azure Web App where we don't get to modify the IIS – Dhanilan Jul 07 '15 at 17:38
You're editing the web.config not modifying IIS directly. Did you follow the link? By the way, this is how I have it working in Azure (web apps). – dcinzona Jul 07 '15 at 17:53

score 0 · Accepted Answer · edited May 23 '17 at 12:01

0

Sorry Guys,

The issue happens only at my corporate network. Having googled I found that corporate network can be disable CORS requests . Found this here link

edited May 23 '17 at 12:01

Community

1
1

answered Jul 10 '15 at 04:33

Dhanilan

183
1
3
15

Enabling CORS for Web API in Azure Web Apps

5 Answers5

Linked