1

I am trying to GET the binary data of a file from an API; I must make this request using JavaScript and I cannot modify the API in any way.

I am currently using the following approach;

function getUserFile() {
        $.ajax({
            type: 'GET',
            url: userData.file.link,
            beforeSend: function(request) {
                request.setRequestHeader('Accept', 'application/octet-stream');
                request.setRequestHeader('Authorization', 'Bearer ' + authToken);
            },
            contentType: 'application/json',
            success: function(data) {
                // Do something with data
            },
            error:  function(errorThrown) {
                console.log(errorThrown);
            }
        });
    }

When I trigger this request from inside the browser it fails and returns a 406. This is occurring because the browser (I believe?) is adding the */* value to my Accept header. It must only contain application/octet-stream for the API to accept the request.

Is it at all possible to remove this extra header value, or disable it from being added to the request in the first place?

EDIT: Running both this and the real API call through JSFiddle does not append the */* value to the Accept header. Running the same code from a standard HTML document does add the value. What is different about these two that might be causing the value to be omitted on one while not the other?

EDIT: The aspx page in question is running either JQuery 1.5.x or 1.8.x

  • So you can neither change the code on the client nor on the server? Could you just overwrite `window.getUserFile()` with a new function? – Evert May 16 '17 at 04:29
  • For the purposes of this question I only have access to the `` element of the asp web form I am working on. I do have access to the server-side code but it is legacy and changes are to be avoided unless completely necessary. The API I am trying to communicate with is owned by another company and no modifications can be made unfortunately. –  May 16 '17 at 04:40
  • I made a code snippet and found no `*/*` would be added to the `Accept` header -- the header value is always `application/octet-stream`. Maybe a good idea to check the backend API document? The code snippet is: https://jsfiddle.net/cshao/9t32qtwn/ and I tested in Chrome, Firefox, Safari on Mac – shaochuancs May 16 '17 at 05:22
  • I tested your snippet and found that that you are correct, no `*/*` value was added to the `Accept` header when run on jsfiddle. However when using the ajax call from inside a `HTML` page the `*/*` value was once again added. I tested this from both a fresh `HTML` document and my current `.aspx` page. –  May 16 '17 at 06:32
  • @Afterfield I made a fresh HTML file and embed the JavaScript code. No `*/*` is added to `Accept` header. Which jQuery version are you using? BTW, you can `@` someone if you want he/she get notified by your comment :) – shaochuancs May 16 '17 at 10:29
  • @shaochuancs The fresh HTML was using 3.2.1 but I cannot say what version the asp page was using (It appears to differ from page to page.) I'll investigate when I get back to my machine. –  May 16 '17 at 21:01
  • The asp page is running either 1.5.x or 1.8.x. Due to how the project is being build I can't really determine which version exactly is being used at this point. –  May 16 '17 at 21:52
  • Possible duplicate of [Cannot properly set the Accept HTTP header with jQuery](http://stackoverflow.com/questions/1145588/cannot-properly-set-the-accept-http-header-with-jquery) – shaochuancs May 16 '17 at 23:10

1 Answers1

0

While it's not the answer as to why this was/is occurring, I have found a working solution to the problem.

In place of the $.ajax() call, I can use a XMLHttpRequest. 

var request;
request = new XMLHttpRequest();

request.addEventListener("load", getComplete);

request.open('GET', userData.file.link);
request.setRequestHeader('Content-type', 'application/json');
request.setRequestHeader('Accept', 'application/octet-stream');
request.setRequestHeader('Authorization', 'Bearer ' + authToken);

request.send();

The 'default' header value was only being appended to my ajax calls; specifically those made from only certain .aspx pages.

If I log the request from beforeSend: this default header value is already present. Somewhere in the project a setting or a piece of JS is causing the ajax calls to be initialise with the Accept header value of */*.

No $.ajaxSetup({ ... }); is present in the project, and using delete $.ajaxSettings.headers["Accept"]; makes no difference. My assumption is that the JQuery file being used by these pages contains modifications that affect ajaxSettings.

EDIT I managed to track down the JQuery file being used by this portion of the asp.NET project. This JQuery file had been modified to include certain default when making AJAX calls. This is why the direct approach of using the XMLHttpRequest was successful.