如何成功地控制台记录来自此api的数据？

Question

当我进入Network选项卡和内部响应时，我确实得到了这个API的结果，但是我无法让它在控制台中输出。

这是代码：

const NAMEURL = "https://uzby.com/api.php"

// get data from api
function getDataFromApi(value, callback){
  const QUERY = {
    min:`${value}`,
    max:`${value}`
  }
  $.getJSON(NAMEURL, QUERY, callback)
}

function renderResult(result){
  return `${result}`;
}

// render results to page
function displayName(data){
  console.log(data);
  const results = renderResult(data);
  $('.nameResult').html(results);
}

// wait for user to submit
function watchSubmit() {
  $('.js-search-form').submit(event => {
    event.preventDefault();
    const queryTarget = $(event.currentTarget).find('#js-dropValue');
    const thisquery = queryTarget.val();
    getDataFromApi(thisquery, displayName);
  });
}
// running the watch submit function waiting for click
$(watchSubmit);

我试着做一个console.log(getDataFromApi())，但是在控制台中没有定义。

Answer 1

console.log(getDataFromApi());将永远无法工作，它的displayName()将不得不对日志进行控制台。

您的代码没有错，除了您试图控制台日志的内容之外，但是即使这样，它也不会工作，因为uzby不想直接与您的应用程序共享它的资源。

因此，确实，您所得到的错误，CORS错误是问题所在。

您需要通过自己的服务器(加载页面的服务器)代理该请求。您必须研究服务器端语言代理上的文档。代码的潜在解决方案可能如下所示：

xmlhttp.open(
    'GET',
    'https://cors-anywhere.herokuapp.com/https://example.com/api.php?' + param,
    true
  );