AngularJS and end-to-end domain

Question

I have a question regarding CORS requests with an HTTP authorization header:

It seems to me that the web browser is not sending an authorization header with a POST request, is there any way around this?

Here is my Angular code:

var app = angular.module('app', []) .config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; }]); app.controller('ctrl', function ($scope, $http) { $scope.insert = function () { $http.post('http://my.api.com/Insert', { headers: { 'Authorization': 'Basic dGVzdDp0ZXN0', 'Content-Type': 'application/x-www-form-urlencoded' }, data: { 'Code': 'test data' }, withCredentials: true }); }; }); 

On the server side I have this in my web.config

 <httpProtocol > <customHeaders> <add name="Access-Control-Allow-Origin" value="*" /> <add name="Access-Control-Allow-Headers" value="Cache-Control, Pragma, Origin, Authorization, Content-Type, X-Requested-With" /> <add name="Access-Control-Allow-Methods" value="GET,POST,PUT,DELETE,OPTIONS" /> <add name="Access-Control-Allow-Credentials" value="true" /> </customHeaders> </httpProtocol> 

Answer 1

You are using $http.post . The second parameter is the data that must be sent to the server, so you cannot set such headers. In your case, it will send the whole object as a JSON payload

Try the following:

 $http({ url:'http://my.api.com/Insert', method:"POST", headers: { 'Authorization': 'Basic dGVzdDp0ZXN0', 'Content-Type': 'application/x-www-form-urlencoded' }, data: { 'Code': 'test data' } }); 

Answer 2

withCredentials - {boolean} - set the withCredentials checkbox to an XHR object. See Credential Queries for more information.