2

I'm trying to get Chrome Logger working in an Angular app running against a PHP backend, but for some reason the X-ChromeLogger-Data header doesn't seem to be coming through when the API is accessed by the Angular app.

If I open the API's access point directly or hit it with a jQuery.get() request everything works fine, even if I make the ajax request from another domain. The API also works correctly otherwise, even when used by the Angular app. It's just that one header disappears somewhere along the way. It doesn't even appear in Chrome's console.

What could cause a header to disappear?

Here's a request made with jQuery.get()

Request:
GET /?action=load HTTP/1.1
Host: -
Connection: keep-alive
Accept: application/json, text/javascript, */*; q=0.01
Origin: -
X-FirePHP-Version: 0.0.6
User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/46.0.2490.80 Safari/537.36
Referer: -
Accept-Encoding: gzip, deflate, sdch
Accept-Language: fi-FI,fi;q=0.8,en-US;q=0.6,en;q=0.4,sv;q=0.2

Response:
HTTP/1.1 200 OK
Date: Sat, 07 Nov 2015 10:41:22 GMT
Server: Apache/2.4.12 (Ubuntu)
X-Powered-By: PHP/5.6.11-1ubuntu3.1
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, X-ChromeLogger-Data
X-ChromeLogger-Data: eyJ2ZXJzaW9uIjoiNC4wIiwiY29sdW1ucyI6WyJsYWJlbCIsImxvZyIsImJhY2t0cmFjZSIsInR5cGUiXSwicm93cyI6W1siQVBJIiwiQVBJIHJlYWNoZWQiLCJ1bmtub3duIiwid2FybiJdXSwicmVxdWVzdF91cmkiOiJcLz9hY3Rpb249bG9hZCJ9
Content-Length: 15
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

And here's one from the Angular app:

Request:
GET /?action=load HTTP/1.1
Host: -
Connection: keep-alive
Accept: application/json, text/plain, */*
Origin: -
X-FirePHP-Version: 0.0.6
User-Agent: Mozilla/5.0 (Linux; U; Android 4.0; en-us; GT-I9300 Build/IMM76D) AppleWebKit/534.30 (KHTML, like Gecko) Version/4.0 Mobile Safari/534.30
Referer: -
Accept-Encoding: gzip, deflate, sdch
Accept-Language: fi-FI,fi;q=0.8,en-US;q=0.6,en;q=0.4,sv;q=0.2

Response:
HTTP/1.1 200 OK
Date: Sat, 07 Nov 2015 10:34:33 GMT
Server: Apache/2.4.12 (Ubuntu)
X-Powered-By: PHP/5.6.11-1ubuntu3.1
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Depth, User-Agent, X-File-Size, X-Requested-With, If-Modified-Since, X-File-Name, Cache-Control, X-ChromeLogger-Data
Content-Length: 15
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: text/html; charset=UTF-8

The Angular code used to make the above request:

$http.get( endpoint, { params : { action : 'load' } } ).then(
    function( response ) {
        console.log( response );
    },
    function() {
        console.log( 'fail' );
    }
);
Schlaus
  • 18,144
  • 10
  • 36
  • 64
  • Could you show your angular code? – Olavi Sau Nov 07 '15 at 10:58
  • @OlaviSau Sure, added it to the question. – Schlaus Nov 07 '15 at 11:02
  • 1
    If I understood correctly, it happens when you are using the angular `$http` only, and jQuery or any other request works fine? – Dvir Nov 07 '15 at 11:19
  • @Dvir Yes, that's exactly correct. – Schlaus Nov 07 '15 at 11:20
  • 1
    It seems to be something that connected with the angular response interceptor, or the built in mechanism. Did you try to debug the angular's library code and check whether angular is removing some headers? – Dvir Nov 07 '15 at 11:24
  • @Dvir Beyond trying to inspect the response object handed to the callback, no. Did you have some idea where I could start looking? – Schlaus Nov 07 '15 at 11:31
  • 1
    I would start with [fiddler](http://www.telerik.com/fiddler) to see if the request from the 2 libraries (angular, jquery) looks the same, and see if the response different or the same so I can see if it's browser issues that removed the headers, or it's something with request that cause the server to return the response without the header you are looking for. – Dvir Nov 07 '15 at 11:38
  • 1
    @Dvir Thanks for the tip! It helped me to finally solve the problem. – Schlaus Nov 07 '15 at 12:02
  • @Schlaus Great! What was the problem? – Dvir Nov 07 '15 at 12:07
  • @Dvir I posted an answer, although the honor should've really been yours. – Schlaus Nov 07 '15 at 12:11

1 Answers1

1

After Dvir's tip to further inspect the differences between the requests (with the aid of Fiddler) I finally manager to solve the problem. I was running the Angular app with Chrome's mobile device simulator turned on, and it turns out the Monolog ChromePHPHandler requires for the text "Chrome" to be present in the User-Agent header, which it wasn't when the simulator was turned on.

Schlaus
  • 18,144
  • 10
  • 36
  • 64