在Access-Control-Request-Headers下添加$ http标头

Question

Whenever I try to add custom Request headers to my $http request the headers does not show up in the Request, instead its comes under Access-Control-Request-Headers like Access-Control-Request-Headers:accept, testHeader See below the output in chrome's network tab:

Request Headers: 
    OPTIONS /v/xyx/abc/query?q=SELECT%20duration%20FROM%20TimeTable HTTP/1.1
    Host: example.com
    Connection: keep-alive
    Access-Control-Request-Method: GET
    Origin: http://localhost
    User-Agent: XXXXXXXX Chrome XXXXXXX
    Access-Control-Request-Headers: accept, testHeader
    Accept: */*
    Referer: http://localhost/test/
    Accept-Encoding: gzip, deflate, sdch
    Accept-Language: en-US,en;q=0.8

Whereas,I am expecting something like:

Request Headers: 
    OPTIONS /v/xyx/abc/query?q=SELECT%20duration%20FROM%20TimeTable HTTP/1.1
    Host: example.com
    Connection: keep-alive
    Access-Control-Request-Method: GET
    Origin: http://localhost
    User-Agent: XXXXXXXX Chrome XXXXXXX
    Accept: application/json
    testHeader: zdhfguwe87fg8378287efijb8
    Referer: http://localhost/test/
    Accept-Encoding: gzip, deflate, sdch
    Accept-Language: en-US,en;q=0.8

How can I prevent this from happening and show the headers under Request header?

See the config of the $http service in Angularjs that I've followed:

//***TRIED BOTH OF THESE: 
//***TRY#1 $http.get(url, {headers:{"Accept": "application/json", "testHeader": "zdhfguwe87fg8378287efijb8"}}).then(.......
//***TRY#2
      $http({
        method: 'GET',
        url: url,
        headers: {
          "Accept": "application/json",
          "testHeader": "zdhfguwe87fg8378287efijb8"
        }
      })
      .then(
        function(){
          //success
          console.log(arguments);
        }, function(){
          //fail
          console.log(arguments);
        });

Answer 1

This is expected behavior as part of the CORS-preflight, which is an OPTIONS request. Once this request succeeds, the actual GET request will be fired by the browser with the custom headers, because the server accepted them.

Only a limited set of headers is approved by default for CORS requests, therefore to add others (including your custom header), the CORS-preflight request needs to ask the server for permission with the Access-Control-Request-Headers HTTP header.

See: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests

Answer 2

It has bloody taken my 3 hours to search for the fxxking answer. Basically it is simple, just let stupid server accept the custom header.

What I have done were adding these to .htaccess

<IfModule mod_headers.c>
        Header add Access-Control-Allow-Origin "*"
        Header add Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
        Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type, x-custom-header-here"
</IfModule>

Now it allows server(API) to accept ajax request from everywhere with most methods and whatever your custom header is or headers are.

it will erase error msg of 'Request header field content-type is not allowed by Access-Control-Allow-Headers in preflight response.'

fxxking all these stupid rule makers!