使用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/