0

I'm using Amazon CloudFront and would like to host my captions.vtt file there. However whenever I load my page I get the following errors.

XMLHttpRequest cannot load https://d1i1yohwujljp9.cloudfront.net/static/video/tutorial/captions.vtt. 
No 'Access-Control-Allow-Origin' header is present on the requested resource.

I'm using Django 1.7+ with GUNICORN and HEROKU -- NGINX will be setup soon and I know I can serve the static files through that but do not want to.

Here is my HTML.

<track kind="captions" src="{{STATIC_URL}}video/tutorial/captions.vtt" srclang="en" label="English" default>

I've tried using Django's https://github.com/ottoyiu/django-cors-headers but it didn't seem to do anything. I set it up to pretty much allow anything.

UPDATE

curl -I -s --insecure "https://d1i1yohwujljp9.cloudfront.net/static/video/tutorial/captions.vtt"

HTTP/1.1 200 OK
Content-Type: application/octet-stream
Content-Length: 112
Connection: keep-alive
Date: Fri, 23 Jan 2015 18:42:42 GMT
Last-Modified: Sun, 18 Jan 2015 05:25:20 GMT
ETag: "09ee18ad6d692bc08edee7cf6dd03651"
Accept-Ranges: bytes
Server: AmazonS3
Age: 501
X-Cache: Hit from cloudfront
Via: 1.1 ccedfe86d5af8e32c02c061b18dc9156.cloudfront.net (CloudFront)
X-Amz-Cf-Id: 35KzEB7s8LGVUtyUzAfUYXF0VBnArmO-Ep96bzLn1JqaUmaf0go8pg==
cph
  • 458
  • 2
  • 6
  • 24
  • CloudFront does not host file, it merely caches them. Looks like your error is pretty clear - Django is complained about missing response header. Please provide curl outputs when you fetch this file from CloudFront and from your origin (is it S3)? It will show what headers are actually returned – Alex Z Jan 23 '15 at 07:21
  • @zakharenko it is s3. – cph Jan 23 '15 at 07:42
  • curls (in debug mode)? they will show difference in headers – Alex Z Jan 23 '15 at 14:36
  • @Alex Zakharenko I may be confused - Sorry pretty new to this.. I searched a combination of "s3 boto 'curls" and didn't find anything that made sense. The file in question above is being served directly from S3 without any static-collection via django. I'm also not sure what I'm supposed to add or where S3 or Django Template file? – cph Jan 23 '15 at 15:04
  • That's the curl i'm talking about: http://linux.die.net/man/1/curl. basically it does http / https query and lets you see what actually happening. By comparing logs when you request file from s3 vs cloudfront might show the difference and possible issue – Alex Z Jan 23 '15 at 18:30
  • Ahhhh got it... I though you were talking about the curls {{}} and that is in aws Thanks I'll see what I can find out. – cph Jan 23 '15 at 18:32
  • Please check this: http://stackoverflow.com/questions/12358173/correct-s3-cloudfront-cors-configuration. Might be exactly the answer you are looking for. Alternatively - please confirm it works when you hit S3 directly & provide curl output from S3 – Alex Z Jan 23 '15 at 20:05
  • That was the issue. Did you want to put answer down so I can mark it off? http://stackoverflow.com/questions/12358173/correct-s3-cloudfront-cors-configuration – cph Jan 24 '15 at 10:24

1 Answers1

1

Please check this: stackoverflow.com/questions/12358173/…. Might be exactly the answer you are looking for. Alternatively - please confirm it works when you hit S3 directly & provide curl output from S3

Alex Z
  • 1,867
  • 1
  • 29
  • 27