localhostからJavaScriptでAPIを呼び出せません

APIからデータを取得し、得られたデータをHTMLページに表示しようとしています。私の問題は、ステータスが0で、statusTextが空であるため、APIデータに実際にアクセスすることができないということです。私はXAMPPで私のページを走らせる。localhostからJavaScriptでAPIを呼び出せません

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>

出典

2016-05-05 marianess

クロスドメインの問題のような音がしますか？ swapi.coはローカルホストからのアクセスを許可する必要がありますが、これはおそらく理由がありません。リクエスト/レスポンスとともにCORSヘッダーを送信するか、リバースプロキシを使用してリクエストをトリックして、同じドメインと通信していると思うようにします。または、一時的な場合は、ブラウザのセキュリティを無効にしてください。 – oooyaya

ありがとうございます。しかし、CORSを追加したい場合は、 'function createCORSRequest（method、url）{}'を自分のコードに追加する必要がありますか？また、私はChromeを使用していますので、cmdを使用してセキュリティを無効にすることをお勧めします。 – marianess

クロムでは、[これらの手順]（http://stackoverflow.com/questions/35432749/disable-web-security-in-chrome-48-and-49）に従うことで、セキュリティを無効にすることができます。私はこれが悪い考えであり、あなたのテストのためだけに使用する必要があると言うことはできません。この場所でインターネットを消費しないでください。完璧な世界では、/ path/to/serviceがApacheにヒットするようにXAMPPのapache設定をプロキシし、Apacheがswapi.coにルーティングするようにします。または、正しい方法は、クロスオリジンのポリシーの考慮事項（CORSヘッダー）を実装することですが、それはswapi.coだけでなくあなたの終わりを変更する必要があります。 – oooyaya

問題は、あなただけのリクエストを送信した後にハンドラをアタッチしていることが考えられます。試してみてください：

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()を使用することができます。textStatusはmyFunctionに渡された二番目の引数になることを

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

注意を。問題がある場合は、次の操作を行います。

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

出典

2016-05-06 09:13:31

これは機能します！ありがとうございました！ – marianess

localhostからJavaScriptでAPIを呼び出せません

答えて

関連する問題