使用XMLHttpRequest和Form调用URL有什么区别?

时间:2016-02-19 08:11:30

标签: javascript xmlhttprequest

我使用静态html / javascript页面(没有php等)

我有一个静态HTML网页。当页面加载时,它会向另一个域上的目标服务器发出XMLHttpRequest,等待响应,并解析响应JSON。

  function executeRequest() {
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
      if (xhttp.readyState == 4 && xhttp.status == 200) {
        var response = JSON.decode(xhttp.responseText);
        alert(response.access_token)
        alert(response.expires_in)
      }
    };
    var tmpURL = "https://target.url.com/oauth2/access_token"
    xhttp.open("POST", tmpURL, true);
    xhttp.send();
  }
  

XMLHttpRequest无法加载[target.url.com] No' Access-Control-Allow-Origin'   标头出现在请求的资源上。   起源' https://local.url.com'因此不允许访问。

为了排除CORS的问题,我可以使用表单请求URL。当用户单击“提交”按钮时,它会带来成功的响应。

<form method="POST" action="https://target.url.com/oauth2/access_token">
  ... form inputs here
  <input type="submit" value="Submit form">
</form>

为什么目标服务器对xmlHttpRequest的响应与Form不同?

1 个答案:

答案 0 :(得分:1)

你有一个CORS问题。

XMLHttpRequests符合CORS规则。

完全使用HTML完成的

<form method="POST" action="http://xxx">帖子不受CORS规则约束。

就这么简单。

允许此交叉源表单发布的部分原因是浏览器将更改浏览器窗口以显示表单帖子的响应,以便跨源站点控制接下来发生的事情。 XMLHttpRequest的情况并非如此,其中请求页面控制接下来发生的事情,因为在XMLHttpRequest之后没有自动加载或显示页面。因此,使用XMLHttpRequest比使用表单帖子更容易造成恶作剧。

有关进一步说明,请参阅Cross Domain Form POSTing