javascript - 响应 header 随着 Angular 消失

Question

我试图让 Chrome Logger 在针对 PHP 后端运行的 Angular 应用程序中工作，但由于某种原因，当API 由 Angular 应用程序访问。

如果我直接打开 API 的访问点或使用 jQuery.get() 请求访问它，一切正常，即使我从另一个域发出 ajax 请求也是如此。该 API 在其他情况下也能正常工作，即使由 Angular 应用程序使用也是如此。只是一个标题在途中某处消失了。它甚至没有出现在 Chrome 的控制台中。

什么会导致标题消失？

这是使用 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

这是 Angular 应用程序中的一个:

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

用于发出上述请求的 Angular 代码:

$http.get( endpoint, { params : { action : 'load' } } ).then(
    function( response ) {
        console.log( response );
    },
    function() {
        console.log( 'fail' );
    }
);

Answer 1

在 Dvir 的提示下进一步检查请求之间的差异(借助 Fiddler )我终于解决了问题。我在 Chrome 的移动设备模拟器打开的情况下运行 Angular 应用程序，结果是 Monolog ChromePHPHandler要求文本“Chrome”出现在 User-Agent header 中，而当模拟器打开时它不是。