Internet Explorer 11: Content-Type missing in the Request Header when sending S3 requests

[schleifer-john]

The Web Application I am working on has to support File Uploads to S3 for multiple browsers. Unfortunately, this includes IE 11.

I was able to get File Uploads to S3 working in Chrome with the following code as mentioned in this thread: #52 (comment)

However, when testing against IE 11 the File Uploads failed and I got a SignatureDoesNotMatch 403 error. I did some troubleshooting of the request messages and noticed that the Chrome requests are internally able to set the 'Content-Type' header, but the IE requests are not.

I was eventually able to get this working by explicitly adding 'Content-Type' in the headers when building my request. The following code works in both Chrome and IE 11:

import Ember from 'ember';

const RSVP = Ember.RSVP;
const set = Ember.set;

export default Ember.Route.extend({
  actions: {
    uploadImage: function (file) {
      let model = this.modelFor(this.routeName);
      RSVP.cast(Ember.$.get('/api/s3_direct')).then(function (response) {
        return file.uploadBinary(response.url, {
          method: 'PUT',
          contentType: file.blob.type,

          //add headers for IE11
          headers: {
            'Content-Type': file.blob.type
          }

          data: JSON.stringify(response.credentials),
        });
      }).then(function (response) {
        set(model, 'url', response.headers.Location);
        return model.save();
      });
    }
  }
});

I tried to dig deeper to compare the underlying objects in Chrome vs IE to see why this was an issue to begin with, but couldn't immediately find anything. I'm guessing this is just due to how the browsers differently interpret javascript code and IE's lack of support for newer features.

In my investigation, I saw a similar issue in another javascript library that sounds similar to what is happening here: jimmywarting/FormData#44 . I tried applying this polyfill library to fix the issue, but it didn't work. I ended up going with the simple 'header' fix for now.

[rafaelGuerreiro]

I'm not sure if this is your situation. It's been a couple months now.

Anyways, IE has some problems with JSON, this might help: https://stackoverflow.com/questions/20489498/aws-signature-problems-with-ie

data: JSON.stringify(response.credentials.replace(/\r\n/g, '\n'));

[jelhan]

Considering to drop IE11 support for next major version. Seems like it's causing a lot of maintenance costs but no one is willing to do the work. Please speak up in #306 if you need IE11 support and are willing to help support it.