0

HerokuにDjangoアプリをデプロイしました。私のホームページの後、すべてのページでAmazon S3でホストされているJavascriptファイルがレンダリングされませんが、Inspect Elementでコンソールを開くと、すべてが正常に読み込まれているように見えます。私のHTMLファイルのヘッダーは以下のとおりです

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

ファイルは明らかに機能しますが、ページをロードすると、すべてのポップアップウィンドウがすでに開いています。

唯一のエラーはこれです

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はhttps://s3.amazonaws.com/mrt-assets/static/css/Button.cssを読み込めません。Origin http://warm-oasis-9454.herokuapp.comは、Access-Control-Allow-Originでは許可されていません。

誰かが私を助けてくれますか？

編集：

これが機能するページ、インデックスです

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

また、s3バケットのCORS要件もここにあります

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

これはもう役に立ちますか？

4

2 に答える 2

2

S3 バケットでクロス オリジン リソース シェアリング (CORS) を有効にする必要があります。これは、Amazon が (ありがたいことに) 最近追加したものです。ここにドキュメントがあります: http://docs.amazonwebservices.com/AmazonS3/latest/dev/cors.htmlそしてここにもhttp://docs.amazonwebservices.com/AmazonS3/latest/UG/EditingBucketPermissions.html

于 2012-11-04T04:17:48.983 に答える
1

それを理解したので、私がする必要があるのは、HTMLページのJavascriptファイルとCSSファイルの順序を逆にすることだけでした。

于 2012-11-04T21:33:33.447 に答える