从AWS-S3存储桶访问我的应用程序

Question

我已将应用程序文件上传到AWS的S3存储桶中。 这是电影搜索应用程序。 由于某种原因，页面上加载了正确的CSS，但是我无法使搜索功能正常工作。 它在我的本地环境上运行良好，但在AWS上却无法运行。 另外，我之前已将应用程序文件上传到AWS中，它们都可以正常工作。 我不确定这次出了什么问题。

这是网页之一

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Movie Info</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel='stylesheet' href='style.css'>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href='index.html'>MovieInfo</a>
            </div>
        </div>
    </nav>

    <div class="container">
        <div id="movie" class="well"></div>
    </div>

    <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous">
    </script>
    <script src="https://unpkg.com/axios/dist/axios.min.js"></script>  <script rel="text/javascript" src="script.js"></script>
    <script>getMovie();</script>
</body>
</html>

这是第二个网页

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Movie Info</title>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
    <link rel='stylesheet' href='style.css'>
</head>
<body>
    <nav class="navbar navbar-default">
        <div class="container">
            <div class="navbar-header">
                <a class="navbar-brand" href='index.html'>MovieInfo</a>
            </div>
        </div>
    </nav>

    <div class="container">
        <div class='jumbotron'>
            <h3 class="text-center">Search For Any Movie</h3>
            <form id="searchForm">
                <input type="text" class='form-control' id='searchText' placeholder="Search Movie">
            </form>
        </div>
    </div>

    <div class="container">
        <div id="movies" class="row"></div>
    </div>

    <script
  src="https://code.jquery.com/jquery-3.5.1.min.js"
  integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
  crossorigin="anonymous"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>  <script rel="text/javascript" src="script.js"></script>
</body>
</html>

这是css脚本

#movies img, #movie img{
    width:100%;
}

@media(min-width:960px){
    #movies .col-md-3 .well{
    height:390px;
    }

    #movies .col-md-3 img{
    height: 240px;
    }
}

这是js脚本

$(document).ready(()=>{
    $('#searchForm').on('submit',(e)=>{
        let searchText = $('#searchText').val();
        getMovies(searchText);
        e.preventDefault();
    })
})

function getMovies(searchText){
    axios.get(`http://www.omdbapi.com/?s=${searchText}&apikey=94d282a9`).then((response)=>{
        console.log(response)
        let movies = response.data.Search;
        let output = '';
        $.each(movies, (index, movie)=>{
            output += `
                <div class="col-md-3">
                    <div class="well text-center">
                        <img src="${movie.Poster}">
                        <h5>${movie.Title}</h5>
                        <a onclick="movieSelected('${movie.imdbID}')" class="btn btn-primary" href="#">Movie Details</a>
                    </div>
                </div> 
            `;
        })

        $('#movies').html(output);
    })
    .catch((err)=>{
        console.log(err);
    })
   //console.log(searchText);
}

function movieSelected(id){
    sessionStorage.setItem('movieId', id);
    window.location = 'movie.html';
    return false;
}

function getMovie(){
    let movieId = sessionStorage.getItem('movieId');

    axios.get(`http://www.omdbapi.com/?i=${movieId}&apikey=94d282a9`).then((response)=>{
        console.log(response)
        let movie = response.data;
        let output = `
            <div class='row'>
                <div class="col-md-4">
                    <img src="${movie.Poster}" class="thumbnail">
                </div>
                <div class="col-md-8">
                    <h2>${movie.Title}</h2>
                    <ul class="list-group">
                        <li class="list-group-item"><strong>Genre: </strong>${movie.Genre}</li>
                        <li class="list-group-item"><strong>Released: </strong>${movie.Released}</li>
                        <li class="list-group-item"><strong>Rated: </strong>${movie.Rated}</li>
                        <li class="list-group-item"><strong>IMDB Rating: </strong>${movie.imdbRating}</li>
                        <li class="list-group-item"><strong>Director: </strong>${movie.Director}</li>
                        <li class="list-group-item"><strong>Writer: </strong>${movie.Writer}</li>
                        <li class="list-group-item"><strong>Actors: </strong>${movie.Actors}</li>
                    </ul>
                </div>
            </div>
            <div class="row">
                <div class="well">
                    <h3>Plot</h3>
                    ${movie.Plot}
                    <hr>
                    <a href="http://imdb.com/title/${movie.imdbID}" target="_blank" class="btn btn-primary">View IMDB</a>
                    <a href="index.html" class="btn btn-info">Go back to search</a>
            </div>  
        `;

        $('#movie').html(output);
    })
    .catch((err)=>{
        console.log(err);
    })
}

我将公共授予每个对象，并且包含对象的对象也具有公共访问权限。