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

Whats the difference between calling a URL using XMLHttpRequest and a Form?

本文关键字：什么 区别 Form XMLHttpRequest 调用 URL 使用      更新时间：2023-09-26

我正在使用静态html/javascript页面（没有php等）

我有一个静态的HTML网页。 当页面加载时，它会向另一个域上的目标服务器发出 XMLHttp请求，等待响应，并分析响应 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] 没有"访问控制允许源" 标头存在于请求的资源上。 因此，不允许访问源"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 的响应与表单的响应不同？

您遇到了 CORS 问题。

XMLHttpRequests受 CORS 规则的约束。

<form method="POST" action="http://xxx">纯粹使用 HTML 完成的帖子不受 CORS 规则的约束。

就这么简单。

允许此跨源表单帖子

的部分原因是浏览器将更改浏览器窗口以显示表单帖子的响应，以便跨源站点控制接下来发生的事情。 XMLHttpRequest请求页面控制接下来会发生什么，因为XMLHttpRequest后不会自动加载或显示任何页面。 因此，与表单帖子相比，XMLHttpRequest更容易造成恶作剧。

有关进一步的说明，请参阅跨域表单 POSTing。

相关文章：