我目前正在做一个关于JavaScript的Udemy课程，我已经在一个项目上坚持了几个星期，我已经尽我所能多次遵循指令，但我似乎错过了一个重要的部分，那就是停止项目表单显示对象。
这个项目的目的是显示鸡尾酒饮料和成分，当你提交你最喜欢的鸡尾酒成一个形式。我有四个JavaScript文件app.js，这是JS代码的主要部分，然后是CocktailAPI.js，这是一个处理API查询的类，然后是UI.js，这是接口行为，最后我还没有达到的部分是CocktailDB.js。
我面临的问题是，我已经创建了处理API请求的类，导师开始将其转换为json，然后将响应转换为对象，然后将其记录在控制台日志中以证明一切正常。我面临的问题是，即使我复制了导师，对象也不会显示在我的控制台上，我得到一条错误消息，内容如下：
CORS策略已阻止从源“null”在“http://www.thecocktaildb.com/api/json/v1/1/search.php?s=vodka”处获取的访问：请求的资源上不存在“Access-Control-Allow-Origin”标头。如果一个不透明的响应满足了你的需求，将请求的模式设置为“no-cors”，以在禁用CORS的情况下获取资源。
我已经检查了网址很多次，甚至复制和粘贴的网址，以消除这个问题，我已经解决了这个问题之前，但最终再次启动该项目，因为我遇到了另一个问题，虽然重新开始将解决它。然而，当我再次到达这一点时，我不知道我做了什么来解决这个问题，因为我尝试了很多事情。
由于有2个文件，目前正在使用的时刻，因为我仍然是相当早期的项目，有没有2个文件，所以我只会张贴2个JS文件。如果这是不够的，请让我知道我需要添加什么。

• app.js*

//Instanciate the classes
const ui = new UI(),
  cocktail = new CocktailAPI();

//Create the event listeners
function eventListeners() {
  //Add event listeners when the form is submittted
  const searchForm = document.querySelector('#search-form');
  if (searchForm) {
    searchForm.addEventListener('submit', getCocktails);
  }
}

eventListeners();

//Get cocktail function
function getCocktails(e) {
  e.preventDefault();

  const searchTerm = document.querySelector('#search').value;

  //Check something is on the search input
  if (searchTerm === '') {
    ui.printMessage('Please add something intot the form', 'danger');
  } else {
    //Query by name of the drink
    cocktail.getDrinkByName(searchTerm)
      .then(cocktails => {
        console.log(cocktails);
      })
  }
}

• 鸡尾酒.js*

class UI {
  //Display a custom message
  printMessage(message, className) {
    const div = document.createElement('div');

    //Add the HTML
    div.innerHTML = `
          <div class="alert alert-dismissable alert-${className}">
          <button type="button" class="close" data-dismiss="alert">X</button>
          ${message}
          </div>
      `;

    //Insert befrore
    const reference = document.querySelector('.jumbotron h1');
    const parentNode = reference.parentElement;
    parentNode.insertBefore(div, reference);

    //Remove after 3 seconds
    setTimeout(() => {
      document.querySelector('.alert').remove();
    }, 3000);

  }
}

• cocktailAPI.js*

class CocktailAPI {
  //Get recipe by name
  async getDrinkByName(name) {

    //Search by name
    const apiResponse = await fetch(`http://www.thecocktaildb.com/api/json/v1/1/search.php?s=${name}`);

    //returns json respnse
    cocktails = await apiResponse.json();

    return {
      cocktails
    }
  }
}

当你加载所有的文件时，我试图生产的东西可能会变得更清楚
我明白这可能不是足够的信息，但如果你问我，我将能够解释得更详细，但代码的意思是显示所有属性的控制台日志中的API的响应
我将复制的代码，以便它可以查看，如果任何人都希望文件本身更深入地研究。