IE11 Drops Request Headers XHR

Question

I currently am building out an Angular app that leverages Angular's httpClient to Post data to an api. The post works perfectly fine in other browsers besides IE11. When making the Post in IE11 I receive a 403, after doing some digging I found that IE11 is dropping my request headers which contains a required key for the API. If I refresh the page, the app will reload and make the API call just fine for some reason. In the code example below the "securityKey" key is whats being dropped.

I've tried adding other keys to see if it was just that specific key causing the issue but all keys appear be get dropped. Even the content type gets set dropped and set to text/plain.

  return this.httpClient.post(
            `${baseUrl}/test`,
            request,
            {
                headers: {
                    'Content-Type': 'application/json',
                    'securityKey': 'foobar',
                },
            },
        );

As in other browsers this code should make the post call with the defined request headers so that the security key gets sent.

UPDATE

My code has been updated to the following but now the x-api-key is not being set. This code resolved the fixed the fact that content-type was not being set correctly resulting the CORS like error. Now the issue is the header key for x-api-key is dropped or just not set. This only occurs on the first page load, after a refresh the header is set just fine.

public makeAPIcall(request) {      
    return this.httpClient.post(
         `${baseUrl}/test`,
         request,
         { headers: this.getHeaders() },
    );
}

private getHeaders(): HttpHeaders {
    const headers = new HttpHeaders();
    headers.append('content-type', 'application/json');
    headers.append('x-api-key', environment.key);

    return headers;
}

It looks like a CORS issue. You could try to call your own domain API rather than calling the API from your browser to the other domain. [This thread](https://stackoverflow.com/questions/34696157/ie-misses-headers-angular-http) explains IE's bug of implementing XHR object, you could check it. I also find [a similar thread](https://stackoverflow.com/questions/45792360/http-preflight-options-request-fails-in-ie-only), you could refer to it for more information. — Yu Zhou, Jul 22 '19 at 08:52
So upon further inspection it appears that the content-type is getting overwitten by IE. In the code above we set the content-type to application/json but in the request it gets set as "text/plain; charset=UTF-8". Every so often on a refresh the content-type gets set correctly and it works as intended, any ideas there? — Tyharo, Jul 22 '19 at 19:57

score 0 · Answer 1 · answered Jul 23 '19 at 09:38

0

From your comment above, it sounds like a "preflight" request.

For HTTP request methods that can cause side-effects on server's data (in particular, for HTTP methods other than GET, or for POST usage with certain MIME types), browser will send a "preflight" request. Then upon "approval" from the server, it sends the actual request with the actual HTTP request method.

application/json is not a simple request, so it might trigger the "preflight". You could try to use code to check the type of data returned and make the second request in IE.

answered Jul 23 '19 at 09:38

Yu Zhou

11,532
1
8
22

I've updated my question, I've made some progress but for some reason the httpheards are not honoring x-api-key. – Tyharo Jul 23 '19 at 17:43
Have you tried to use code to make the second request? What's the detailed error information? I also think the first load is a preflight request. I found [this thread](https://stackoverflow.com/questions/47853022/how-to-pass-x-api-key-in-headers-in-angular-api-request) similar to your situation. As it says, it's a server side issue, you should allow `Access-Control-Allow-Headers` in server end. Please check [this answer](https://stackoverflow.com/questions/25727306/request-header-field-access-control-allow-headers-is-not-allowed-by-access-contr/30554385#30554385) for detailed information. – Yu Zhou Jul 24 '19 at 07:07
Please try the methods I mentioned above, if the issue still occurs it could be better if you share a simple sample which helps reproduce it. – Yu Zhou Jul 24 '19 at 07:08
So it appears that IE 11 is not sending preflight until the application get refreshed. I see the POST call in the networking tab but no OPTIONS call. CORS is working as intended on both ends but depending on how the headers are built either no preflight is sent or a preflight is send but the headers are missing in the preflight causing the CORS like error. – Tyharo Jul 25 '19 at 13:04

IE11 Drops Request Headers XHR

1 Answers1