Bad XMLHttpRequest when uploading to S3

Question

I'm using Evaporate.js to upload files to S3. I've had everything working, until I decided to enable server side encryption.

According to the S3 docs, you can enable it by passing a header. So I updated my add code to look like:

var promise = _e_.add({
            name: name,
            file: files[i],
            started: callback_methods.started,
            complete: callback_methods.complete,
            cancelled: callback_methods.cancelled,
            progress: callback_methods.progress,
            error: callback_methods.error,
            warn: callback_methods.warn,
            paused: callback_methods.paused,
            pausing: callback_methods.pausing,
            resumed: callback_methods.resumed,
            nameChanged: callback_methods.nameChanged,
            xAmzHeadersAtInitiate: { 'x-amz-server-side​-encryption': 'AES256'} // THIS IS THE ONLY LINE THAT CHANGED!!!
          }
          )

I get the error: DOMException: Failed to execute 'setRequestHeader' on 'XMLHttpRequest': 'AWS4-HMAC-SHA256 Credential=XXXXXXXXXXXXXXX/XXXXXXX/us-east-1/s3/aws4_request, SignedHeaders=content-type;host;x-amz-date;x-amz-server-side​-encryption, Signature=XXXXXXXXXXXXXXXXXXXXX' is not a valid HTTP header field value.

Answer 1

Update:

Header fields can only be ASCII characters. x-amz-server-side-encryption in your code contains a hidden character. Type it instead of copy pasting it from somewhere. Go to this web page and paste the header field name after copying from your question, you will see what i mean.

From the documentation:

You can't enforce whether or not objects are encrypted with SSE-S3 when they are uploaded using pre-signed URLs.

You need to sign the header along with the URL. Just sending the headers after signing the URL won't work.

var promise = _e_.add({
    name: name,
    file: files[i],
    started: callback_methods.started,
    complete: callback_methods.complete,
    cancelled: callback_methods.cancelled,
    progress: callback_methods.progress,
    error: callback_methods.error,
    warn: callback_methods.warn,
    paused: callback_methods.paused,
    pausing: callback_methods.pausing,
    resumed: callback_methods.resumed,
    nameChanged: callback_methods.nameChanged,
    signHeaders: { 'x-amz-server-side-encryption': 'AES256' }, // notice this
    xAmzHeadersAtInitiate: { 'x-amz-server-side-encryption': 'AES256'} // this should be fine now as we have the header in the signed request too but try removing this if you still get an error. S3 does not require you to re-specify the headers that were already signed.
});