title: Axios with OMDB API, getting 401 Unauthorized
body: <p>I am trying to implement the OMDB API in a development application and in the console I continue to get a 401 Unauthorized error. I have an active <code>apikey</code> from the OMDB API website, but I must say the usage is confusing me. </p>
  
  <p>What I got in the email looked like this:</p>
  
  <p><a href="http://www.omdbapi.com/?i=tt12345678&amp;apikey=1234cae2" rel="nofollow noreferrer">http://www.omdbapi.com/?i=tt12345678&amp;apikey=1234cae2</a></p>
  
  <p>and I have tried to implement it in various ways, in particular like this:</p>
  
  <pre><code>/** catch a submission of the form
   * and then take the value and call a function getMovies to reach out
   * to API
   *
   **/
  $(document).ready(() =&gt; {
    $('#searchForm').on('submit', (e) =&gt; {
      // 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) =&gt; {
      console.log(response);
    }).catch((err) =&gt; {
      console.log(err);
    });
  }
  </code></pre>
  
  <p>but I am unclear as to whether I do need to append the api in there and if so, which set of numbers is the api key? I have tried both the <code>12345678&amp;</code> and the <code>1234cae2</code>.</p>
  
  <p>After all this, I am not sure if the problem is my axios library which I am pulling in via Content Delivery Network like this:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en"&gt;
  &lt;head&gt;
    &lt;meta charset="UTF-8"&gt;
    &lt;meta name="viewport" content="width=device-width, initial-scale=1.0"&gt;
    &lt;meta http-equiv="X-UA-Compatible" content="ie=edge"&gt;
    &lt;title&gt;Movie Info&lt;/title&gt;
    &lt;link rel="stylesheet" href="https://bootswatch.com/4/cyborg/bootstrap.min.css"&gt;
    &lt;link rel="stylesheet" href="/css/style.css"&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;nav class="navbar navbar-default"&gt;
      &lt;div class="container"&gt;
        &lt;div class="navbar-header"&gt;
          &lt;a href="index.html" class="navbar-brand"&gt;MovieInfo&lt;/a&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/nav&gt;
  
    &lt;div class="container"&gt;
      &lt;div class="jumbotron"&gt;
        &lt;h3 class="text-center"&gt;Search for Any Movie&lt;/h3&gt;
        &lt;form id="searchForm"&gt;
          &lt;input type="text" class="form-control" id="searchText" placeholder="Search Movie..."&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div class="container"&gt;
      &lt;div id="movies" class="row"&gt;&lt;/div&gt;
    &lt;/div&gt;
  
    &lt;script
    src="https://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"&gt;&lt;/script&gt;
    &lt;script src="https://unpkg.com/axios/dist/axios.min.js"&gt;&lt;/script&gt;
    &lt;script src="js/main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Any guidance would be greatly appreciated.</p>