Get raw request / response from $http call

Question

I am writing an AngularJs app to test an API we developed. The app uses the $http object to make requests to the API. One of the asks is that after the call it's possible to review the raw HTTP (headers and bodies) Request/Response, similarly to what's available in Fiddler via Raw tabs.

Is it something that $http provides out of the box?

If not, it appears that the only challenge is gaining access to the actual request http headers. It's easy to get the response headers and request/response bodies, but not sure how to get the actual request headers.

Thanks.

Looking into this more, the question is how to get ALL http headers sent by $http object in a request. All response headers are easily available, but how to get actual request headers is still a question. Thanks. — user1044169, May 12 '15 at 15:35
from docs and a couple of tries I looks like it is impossible to get ALL http headers sent by the browser. All: interceptor, request transformer and response's config object show only those headers, which were set by the library itself. Is it possible, that a browser adds some headers on its own, regardless them were added by the library or not? However, maybe it is possible to find something in sources or, probably, replace the $http service with another tool which provides such kind of information. — DWand, May 12 '15 at 17:44
$http service may be tested with $httpBackend. $httpBackend provides ability to specify which headers you are expecting the request to have. However, I don't know whether it works with all headers or only with headers set by the library. — DWand, May 12 '15 at 17:49

score 1 · Answer 1 · edited May 23 '17 at 10:24

If you are using $http service to make your API calls, you can use Interceptors to achieve what you want.

Here is what docs tell us about them:

For purposes of global error handling, authentication, or any kind of synchronous or asynchronous pre-processing of request or postprocessing of responses, it is desirable to be able to intercept requests before they are handed to the server and responses before they are handed over to the application code that initiated these requests. The interceptors leverage the promise APIs to fulfill this need for both synchronous and asynchronous pre-processing.

You can find more in depth explanation in the official docs. For example, here.

Also, there are some questions about interceptors on this site. There are some examples of their usage for displaying loading screen in applications: here, here and, probably, somewhere else.

Hope, this helps.

score 0 · Answer 2 · answered May 12 '15 at 15:21

Yes, AngularJs is wrapped around some JQuery or internally JQlite if JQuery is not present and written in Javascript and it provides some pre-defined services. A typical service looks like the following.

AngularJS docs: tutorial step 5

$ Prefix Naming Convention You can create your own services, and in fact we will do exactly that in step 11. As a naming convention, Angular's built-in services, Scope methods and a few other Angular APIs have a $ prefix in front of the name.

The $ prefix is there to namespace Angular-provided services. To prevent collisions it's best to avoid naming your services and models anything that begins with a $.

If you inspect a Scope, you may also notice some properties that begin with $$. These properties are considered private, and should not be accessed or modified.

angular.module('myApp')
.factory('myService', function ($http, $injector) {
    'use strict';

    return $http.get('/endpoint')
        .then(function () {
            return $injector.get('endpoint');
        }
        .error(function () {
            // handle error
        }
    };
})

Have a look a the image in AngularJS docs which shows a number of services with the $ prefix. Mostly, wrappers over service. It is reserved. More at FAQ.

Get raw request / response from $http call

2 Answers2