سؤال

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?

هل كانت مفيدة؟

المحلول 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.

نصائح أخرى

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

مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top