Bad XMLHttpRequest when loading on S3

Question

I use Evaporate.js to upload files to S3. Everything works for me until I decided to enable encryption on the server side.

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

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 your code contains a hidden character. Print it, not copy it anywhere. Go to this web page and paste the name of the header field after copying from your question, you will see what I mean.

In the documentation:

You cannot guarantee whether objects will be encrypted using SSE-S3 when they are downloaded using pre-signed URLs.

You need to sign the header along with the url. Just sending headers after signing the URL will not 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. });