无法从本地主机通过 JavaScript 调用 API答案

【问题标题】：Cannot call API by JavaScript from localhost无法从本地主机通过 JavaScript 调用 API
【发布时间】：2016-08-31 15:41:47
【问题描述】：

我正在尝试从 API 中提取数据并在 HTML 页面中显示获得的数据。我的问题是我实际上无法访问 API 数据，因为状态为 0 而 statusText 为空。我使用 XAMPP 运行我的页面。

var xmlhttp = new XMLHttpRequest();
var url = "http://swapi.co/api/people/1";
xmlhttp.open("GET", url, true)
xmlhttp.send()


xmlhttp.onreadystatechange=function(response) {
    if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
        myFunction(xmlhttp.responseText);
    }
}

console.log(xmlhttp.status)
console.log(xmlhttp.statusText)

function myFunction(response) {
    var arr = JSON.parse(response);
    var i;
    var out = "<table>";

    for(i = 0; i < arr.length; i++) {
        out += "<tr><td>" + 
        arr[i].name +
        "</td><td>" +
        arr[i].films +
        "</td><td>" +
        arr[i].gender +
        "</td></tr>";
    }
    out += "</table>";
    document.getElementById("id01").innerHTML = out;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone-localstorage.js/1.0/backbone.localStorage-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min.js"></script>
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
 
   
  <title>swapi</title>
</head>
<body>
   <div id="id01"></div>
</body>
 </html>

【问题讨论】：

听起来像是跨域问题？ swapi.co 需要允许从 localhost 进行访问，这很可能是不允许的。将 CORS 标头与请求/响应一起发送，或使用反向代理来欺骗请求，使其认为它正在与同一个域进行通信。或者只是暂时禁用浏览器的安全功能。
谢谢，它看起来很有帮助，但如果我想添加 CORS，我应该在我的代码中添加 function createCORSRequest(method, url) {} 吗？另外，我使用 Chrome，所以我假设您建议使用 cmd 禁用安全性。
在 chrome 中，您可以通过关注 these instructions 来禁用安全性。我不能说这是一个坏主意，只需要用于您的测试。不要在这个地方公开互联网。完美的世界，您将在 XAMPP 的 apache 配置中进行代理，以便 /path/to/service 访问 Apache，然后 Apache 将其路由到 swapi.co。或者正确的方法是实施跨域策略考虑（主要是 CORS 标头），但这需要对 swapi.co 以及您的端进行更改。
如果是核心，控制台会出错。您遇到了什么错误？
控制台上根本没有显示错误。我只有 console.log(xmlhttp.status) 0 和 console.log(xmlhttp.statusText) 为空。最后一个应该是 200。

标签： javascript ajax api rest backbone.js

【解决方案1】：

问题可能是您仅在发送请求后才附加处理程序。试试：

var xmlhttp = new XMLHttpRequest();
var url = "http://swapi.co/api/people/1";
xmlhttp.open("GET", url, true);
xmlhttp.onreadystatechange = function(response) {
  console.log(xmlhttp.status);
  console.log(xmlhttp.statusText);
  if (xmlhttp.readyState == 4 && xmlhttp.status == 200) {
    myFunction(xmlhttp.responseText);
  }
};
xmlhttp.send();

由于您在 jQuery 中使用主干，您可以使用 $.get():

$.get("http://swapi.co/api/people/1").done(myFunction);

请注意，textStatus 将是传递给myFunction 的第二个参数。如果这是一个问题，你可以这样做：

$.get("http://swapi.co/api/people/1").done(function(data,textStatus){
  myFunction(textStatus);
});

【讨论】：