Why Angular AJAX Request is displayed twice in the chrome network tab

Question

I just noticed that when I made an Angular request ( 1.4.8 ), the AJAX POST appears twice on the chrome network tab (first (355B) as angular.js:10765 and the second (812B) as other , where the request looks first and the second - as an answer - only the second contains response data). I made an identical query using jQuery and it appeared as a single query (812B).

CODE:

 return function ( id ) { var deferred = $q.defer() , data = { id: id || null, range: tbDateRange.get( true ) } ; /* TODO - REMOVE */ $.ajax({ method: 'POST', url: path, dataType: 'JSON', data: data }); $http.post( path, data ) .success( function ( data ) { /*...*/ deferred.resolve( data ); } ) .error( function ( error ) { /*...*/ } ); return deferred.promise; }; 

And a screenshot of a tab on the network:

Answer 1

Angular by default uses POSTing formatted JSON data instead of data encoded in the form (jQuery does not make the statement that I made an identical query using jQuery incorrect).

Cross origin, JSON formatting, POST requests require a pre-flight OPTIONS request.

Presumably (since you did not provide any request details other than the end of the URL they are collecting), the first of these requests is a pre-flight OPTIONS request.