Amazon S3 is not serving files correctly

Question

I made this site for my friend and I uploaded it to an Amazon S3 bucket (http://ballard26.s3.amazonaws.com/index.html) and when I go to that site the page doesn't load correctly and I have no idea why. Any ideas?

For example, the stylesheet.css doesn't load correctly. If you go to http://ballard26.s3.amazonaws.com/stylesheet.css, it downloads the file instead of loading it as CSS.

Solution 1

Check the mime types (HTTP content type header) on the files you uploaded. S3 does not always set them correctly. You may need to set them on the upload API call. Some upload libraries will do this for you.

If the mime types are not correct when the file is downloaded from the browser from S3 if the mime type is not set correctly it will not always render correctly.

Solution 2

CSS files default to a MIME type of octet/binary. To correct this, sign into your AWS Management Console, go to the Amazon S3 section and find the relevant bucket. Locate the CSS file and select Properties. Under Metadata, set the Content-Type key to value: text/css

If you use Panic’s Transmit app for Mac OS X, you can set a Custom Upload Header for CSS files of Content-Type: text/css which will apply the correct MIME type every time you upload a file, removing the need to manually set this in your Console each time.

More info on this is in Adam Wilcox’s blog post.

Solution 3

I would guess that you did not specify or set the mime-type of the file properly when uploading the file. As a result, it is defaulting to binary/octet-stream.

When you load your page, your browser is assuming that the stylesheet you specified is not a CSS file, since it is being served with a content-type other than text/css, and so is not applying the style sheet.

Solution 4

I had the same problem in IE due to incorrect content-type of our CSS / JS files.

If you are using Ruby and the AWS gem, use the code this:

s3 = Aws::S3Interface.new($s3[:s3_access_key_id],$s3[:s3_secret_access_key],{:multi_thread => true});
s3.put($s3[:s3_bucket],s3_path,file[:tempfile].read,{'x-amz-acl' => 'public-read', 'content-type' => 'text/css' })

Notice the different syntax for the S3 Metadata:

'content-type' => 'text/css'

View more solutions

Comments

[pinoyyid]

or ... The mime-type can be correct by there is also a content-disposition header set to "attachment"

[jerclarke]

Just wanted add that the Transmit answer was what solved it for me. One CSS file was triggering octet/binary for some reason even though all others were going through correctly which I still can't explain. Forcing the issue in Transmit saved my gluteus.

[max kaplan]

I great way to quickly view all the headers is to use curl. For example: $ curl -I maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.cs‌​s -- make sure to add the '-I' so the headers are viewed and not the content of the doc.

[DevOpsSauce]

I'm needing to do the same for a .zst file but the AWS console did not have that option. All I see are application/x-compressed, application/zip, application/x-gzip, and application/x-gzip.