帶有 OMDB API 的 Axios，得到 401 Unauthorized

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（' http://www.omdbapi.com/?apiKey=1234cae2'+'＆t ='+ searchText）.then（（response）=> {console.log（response）;}）

要傳遞的參數列表位於參數部分http://www.omdbapi.com/

注意：我用參數分隔url，因此您可以使用任何喜歡id，title或search sting的參數。 jQuery確實也提供了一個ajax api，它也支持promises。 因此，axios可能是這里的額外負擔。

Answer 2

這完全像這樣工作。 由於某種原因，它不會以任何其他方式工作。

axios.get(`http://www.omdbapi.com/?i=${searchText}&apikey=${APIKeyHere}`)

Answer 3

$(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

問題描述

3 個解決方案

解決方案1
0 已采納 2018-03-12 21:02:26

解決方案2
-1 2022-01-10 12:52:32

解決方案3
-2 2019-02-02 15:02:40

帶有 OMDB API 的 Axios，得到 401 Unauthorized

問題描述

3 個解決方案

解決方案1 0 已采納 2018-03-12 21:02:26

解決方案2 -1 2022-01-10 12:52:32

解決方案3 -2 2019-02-02 15:02:40

解決方案1
0 已采納 2018-03-12 21:02:26

解決方案2
-1 2022-01-10 12:52:32

解決方案3
-2 2019-02-02 15:02:40