Angular POST with custom header and CORS

Question

I need to perform a POST request using angular (http.post) and I need to pass to my API (.NET) in my header the access credentials (I’m using basic Authentication).

Authorization:Basic dXNlcm5hbWU6cGFzc3dvcmQ=

At the angle I change the header as I need

$http.defaults.headers.common.Authorization = 'Basic ' + credentials;

But the moment I perform the POST for the API, Angular (or browser) changes my POST to OPTIONS

Request Method:OPTIONS

I have searched several places about, but could not find a solution. On the Web.Config of my API I have already configured to allow CORS.

  <customHeaders>
    <add name="Access-Control-Allow-Origin" value="http://localhost:9000" />
    <add name="Access-Control-Allow-Headers" value="Origin, X-Requested-With, Content-Type, Accept, Cache-Control" />
    <add name="Access-Control-Allow-Credentials" value="true" />
    <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" />
  </customHeaders>

Can anyone tell me what I might be doing wrong? How to find the solution? Thanks in advance!

Answer 1

Problem solved, really the problem was in my Webapi.

To add support to CORS I had to use the package Microsoft.AspNet.Webapi.Cors from Nuget, following the article I found here.

Add the package Microsoft.AspNet.Webapi.Cors to the project using Nuget

Install-Package Microsoft.AspNet.WebApi.Cors

Add code in configuration WebApiConfig.cs

public static void Register(HttpConfiguration config)
{
    // New code
    config.EnableCors();
}

To enable cross-origin add [Enablecors] to the controller or method you want

[EnableCors(origins: "http://example.com", headers: "*", methods: "*")]
public class TestController : ApiController
{
    // Controller methods not shown...
}

If you wish to enable globally

public static void Register(HttpConfiguration config)
{
    var corsAttr = new EnableCorsAttribute("http://example.com", "*", "*");
    config.EnableCors(corsAttr);
}

Answer 2

You need to add the resource URL to the Delegateprovider. Thus:

myApp
.config(['$sceDelegateProvider', function($sceDelegateProvider) {
     $sceDelegateProvider.resourceUrlWhitelist(['self','http://localhost:9000/**']);
 }]);

If you do not specify, your browser will try to get the list of authorizations from the server via header OPTIONS. That is part of the specification of the standard CORS.