Question

我创建了一个包含两个输入和一个提交按钮的表单。表单将发布到RESTful服务，该服务已全部设置。

我想使用AJAX来POST这个RESTful服务然后返回对象，然后我可以验证表单。

对象将返回类似这样的错误，类似于成功

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

我的代码如下。当我测试我在localhost上使用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/

使用AJAX和返回对象

1 个答案: