Search code examples
djangocorsamazon-cloudfrontdjango-cors-headers

Text Track from origin has been blocked from loading and Heroku Django App


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==

Solution

  • 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