DISABLE ADBLOCK

ADBlock is blocking some content on the site

ADBlock errore

Javascript not rendering in Django app on Heroku

StackOverflow https://stackoverflow.com/questions/13215994

Question

Deployed a Django app on Heroku, and after my home page, every page after does not render the Javascript file hosted on Amazon S3, but when opening Console in Inspect Element, it seems as if everything is loading fine. The header for my HTML file is below

#questions.html
<link rel="stylesheet" type="text/css" href="https://s3.amazonaws.com/mrt-assets/static/css/QandA.css">
<link rel="stylesheet" type="text/css" href="https://s3.amazonaws.com/mrt-assets/static/css/Button.css">
<script src="https://s3.amazonaws.com/mrt-assets/static/js/prefixfree.min.js"></script>
<script src="https://s3.amazonaws.com/mrt-assets/static/js/index.js"></script>
<script src="https://s3.amazonaws.com/mrt-assets/static/js/qanda.js"></script>

The file clearly works, but all the popup windows are already open when I load the page.

The only error is this

2XMLHttpRequest cannot load https://s3.amazonaws.com/mrt-assets/static/css/QandA.css. Origin http://warm-oasis-9454.herokuapp.com is not allowed by Access-Control-Allow-Origin.

2XMLHttpRequest cannot load https://s3.amazonaws.com/mrt-assets/static/css/Button.css. Origin http://warm-oasis-9454.herokuapp.com is not allowed by Access-Control-Allow-Origin.

Anyone help me out?

EDIT:

Here is the page that works, the index

#index.html
<link rel="stylesheet" type="text/css" href="https://s3.amazonaws.com/mrt-assets/static/css/Index.css">
<link rel="stylesheet" type="text/css" href="https://s3.amazonaws.com/mrt-assets/static/css/Button.css">
<script src="https://s3.amazonaws.com/mrt-assets/static/js/prefixfree.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="https://s3.amazonaws.com/mrt-assets/static/js/index.js"></script>

Also here is my CORS requirement for my s3 bucket

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>
            testsite.com
        </AllowedOrigin>
        <AllowedMethod>PUT</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedMethod>DELETE</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>PUT</AllowedMethod>
    </CORSRule>
</CORSConfiguration>

Is this any more helpful?

Solution 2

Figured it out, all I needed to do was reverse the order of the Javascript files and the CSS Files in the HTML page.

OTHER TIPS

You'll need to enable cross origin resource sharing (CORS) on your S3 bucket, which Amazon (thankfully) added recently. Here's the docs: http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.html and also here http://docs.amazonwebservices.com/AmazonS3/latest/UG/EditingBucketPermissions.html

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow