Enabling CORS in Azure Service Fabric Web Api

2
votes

I have an angular app that sends an http request to my Service Fabric Web API (deployed on a Secure Service Fabric cluster) like so:

    $scope.request_headers = {
            "Content-Type": "application/xml; charset=utf-8",
            "Access-Control-Allow-Origin":"*"
        }
    $http({
                url: "Service_Fabric_web_api_url",
                method: "GET",
                headers:$scope.request_headers
            }).
            then(function (result) {
                console.log(result);
            });

I've also enabled CORS globally in my web api startup class like so:

HttpConfiguration config = new HttpConfiguration();
var cors = new EnableCorsAttribute("*", "*", "*");
config.EnableCors(cors);

When I run my angular app locally and try sending the http request, I still get this error:

XMLHttpRequest cannot load Service_Fabric_web_api_url. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:xxxxx' is therefore not allowed access. The response had HTTP status code 500.

I'm able to access my service directly from my browser with the same url.

Also, the same http request works when I tried deploying my Web Api on an unsecure Service Fabric Cluster with the same lines added to the startup class to enable CORS.

Why is this happening even though I've enabled CORS globally in my Web API and particularly when its on a secure cluster?

2
angularjsazureasp.net-web-apimicroservicesazure-service-fabric
Just a note, you don't need to set the CORS header on the Angular side. Something is going wrong in your API since the response status is 500. – juunas
Yes, that's what I, thought too.. – kuk_94
Could you post the whole Web API configuration instead of just the lines registering CORS? – juunas
But that's the only part that's added to the default config lines other than the routing part – kuk_94
I was able to work around this issue by using a nodejs proxy server to route all my traffic. Still couldn't fix it at the server side though. – kuk_94

2 Answers

2
votes

In your Startup.cs class, do you have this line? :

 public void ConfigureAuth(IAppBuilder app)
 {
     app.UseCors(Microsoft.Owin.Cors.CorsOptions.AllowAll);
 }

There are also a couple NuGet packages associated with Cors:

<package id="Microsoft.AspNet.Cors" version="5.0.0" targetFramework="net45" />
<package id="Microsoft.Owin.Cors" version="3.0.1" targetFramework="net45" />
1
votes

The CORS message is a red herring. If you look at the end of the error message you'll see this:

The response had HTTP status code 500.

Usually the response will include some detail about the error. I suggest using a tool like Fiddler with HTTPS decryption enabled so you can see the content of the response.