使用AJAX和返回對象的POST表單數據

Question

我創建了一個具有兩個輸入和一個提交按鈕的表單。該表單將發佈到所有已建立的RESTful服務。

我想使用AJAX爲了發佈到這個RESTful服務，然後返回對象，以便我可以驗證表單。

對象將返回類似這樣的一個錯誤，一個成功的

{"status":"error","message":"Incorrect username or password."} 

類似我的代碼如下。當我測試我在本地主機上使用XAMPP時：81。當我提交表單時，我收到此錯誤。

No 'Access-Control-Allow-Origin' header is present on the requested resource. 


<form name="login-form" id="login-form" method="post" action="SERVICEHERE"> 
       <label id="error">Sorry it seems your credentials are incorrect</label> 
       <div class="inputBlock"> 
        <label for="username">Username</label> 
        <input type="text" id="username" name="username"/> 
       </div> 
       <div class="inputBlock"> 
        <label for="password">Password</label> 
        <input type="password" id="password" name="password"/> 
       </div> 
       <input type="submit" value="Login" id="submit" /> 
       </form> 

$(document).ready(function() { 
     $("#login-form").submit(function (e) { 
      e.preventDefault(); 
      var formData = $("#login-form").serialize(); 
      console.log(formData); 
      $.ajax({ 
      type: "GET", 
      url: $("#login-form").attr('action'), 
      data: formData, 
      success: function(data) { 
       alert(data); 
      } 
      });  
     }); 
    }); 

Answer 1

您無法將內容發佈到JavaScript以外的其他域。由於安全原因，它不被允許，並且它被瀏覽器阻止。

當您通過網頁的JavaScript執行XmlHttpRequest到另一個域時，瀏覽器會在請求的Origin標頭中設置您的域名。該目標域名必須以包含您的域名的標頭Access-Control-Allow-Origin作爲響應，這意味着它允許域名的客戶端調用它。否則，瀏覽器將阻止該呼叫。

參考：https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS

編輯：有辦法繞過瀏覽器的安全性，並允許CORS所有的時間：https://www.thepolyglotdeveloper.com/2014/08/bypass-cors-errors-testing-apis-locally/