Js関数がChromeで正しく機能しない

Question

私はhtmlでログインページを持っています。私はAPIを呼び出すためにJs関数を使用しています。コードは

function submitdetails() { 
    var username = document.getElementById("username").value; 
    var password = document.getElementById("password").value; 
    var params = JSON.stringify({ username: username, password: password }); 
    var xmlhttp = new XMLHttpRequest(); 
    xmlhttp.onreadystatechange = function() { 
     if (xmlhttp.readyState == XMLHttpRequest.DONE) { 
      if (xmlhttp.status == 200){ 
       if(xmlhttp.responseText == "AdminLogin"){ 
          // Redirect Url to Ldap Configuration settings page 
          window.location.href = "Configure.html"; 
       }else{ 
        var cook = document.cookie; 
        document.getElementById("login_form").innerHTML = xmlhttp.responseText; 
        //document.getElementById("login_form").innerHTML = cook 

       } 
      } 
       else{ 
        document.getElementById("login_form").innerHTML = "Error"; 
       } 
      } 
     }; 
     xmlhttp.open("POST","http://127.0.0.1:8000/login/",true);  
     xmlhttp.send(params); 
    } 

です。上記のコードは、IEで完全に正常に動作します。しかし、私がChromeで試してみると、エラーが返される "else文"に戻ります。

Answer 1

これはCORSの問題です。あなたのバックエンドはしている可能性があり、このようなエントリ：

Access-Control-Allow-Origin: * 

もIE上ではなく、Firefoxとクロームのこの作品。

FirefoxとChromeでは、 Access-Control-Allow-Originヘッダーに正確なドメイン指定が必要です。認証付きサーバーの場合、 これらのブラウザーはこのヘッダーに「*」を使用できません。 Access-Control-Allow-Originヘッダーには、クライアントによって渡された Originヘッダーの値が含まれている必要があります。

したがって、バックエンドのCORS設定を調整する必要があります。 CORSのヘッダ定義MDM