Question

我正在尝试在开发应用程序和控制台中实现OMDB API，我继续收到401 Unauthorized错误。我有一个来自OMDB API网站的活跃apikey，但我必须说这种用法让我感到困惑。

我在电子邮件中看到的内容如下：

http://www.omdbapi.com/?i=tt12345678&apikey=1234cae2

我试图以各种方式实现它，特别是像这样：

/** catch a submission of the form
 * and then take the value and call a function getMovies to reach out
 * to API
 *
 **/
$(document).ready(() => {
  $('#searchForm').on('submit', (e) => {
    // put this in a variable
    // console.log($('#searchText').val());
    let searchText = $('#searchText').val();
    getMovies(searchText);
    // stops form from submitting
    e.preventDefault();
  });
});

function getMovies(searchText) {
  // console.log(searchText);
  axios.get('http://www.omdbapi.com/?s='+searchText).then((response) => {
    console.log(response);
  }).catch((err) => {
    console.log(err);
  });
}

但我不清楚我是否需要在那里附加api，如果是，那么哪一组数字是api密钥？我尝试了12345678&和1234cae2。

毕竟，我不确定问题是否是我通过Content Delivery Network提取的axios库，如下所示：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Movie Info</title>
  <link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css">
  <link rel="stylesheet" href="/css/style.css">
</head>
<body>
  <nav class="navbar navbar-default">
    <div class="container">
      <div class="navbar-header">
        <a href="index.html" class="navbar-brand">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.3.1.min.js"
  integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
  crossorigin="anonymous"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
  <script src="js/main.js"></script>
</body>
</html>

非常感谢任何指导。

Answer 1

要搜索omdb api，您必须提供apiKey并在ajax请求中传递相同的内容

示例api http://www.omdbapi.com/?apikey=1234cae2&plot=short&t=Oceans

示例ajax axios.get（＆＃39; http://www.omdbapi.com/?apiKey=1234cae2＆＃39; +＆＃39;＆amp; t =＆＃39; + searchText）.then（（response）=＆gt; { 的console.log（响应）; }）

要传递的参数列表位于参数部分 http://www.omdbapi.com/

注意：我正在使用参数分隔url，因此您可以使用任何您喜欢id，title或search sting的参数。此外，jQuery还附带了一个也支持promises的ajax api。因此，axios可能是一个额外的负载。

Answer 2

$(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=9be27fce').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);


     });
}

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=9be27fce').then((response) => {


        let movie = response.data;
        console.log(movie);
        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-default"> Go Back To Search</a>


                </div>


            </div>
         `;

        document.querySelector('#movie').innerHTML = output;
     })

     .catch((err) => {

        console.log(err);


     });
}

使用OMDB API的Axios，获得401 Unauthorized

2 个答案: