浏览器安全策略如何使用XMLHttpRequest

How does the browser security policy work with XMLHttpRequest?

本文关键字：XMLHttpRequest 何使用 安全策略 浏览器      更新时间：2023-09-26

我读到浏览器安全策略背后的主要思想是，您不能从与页面所在域不同的域中检索数据。但我不明白为什么我能这么做？

<!doctype html>
<html>
    <head>
        <title>Template</title>
        <meta charset="utf-8">
        <link rel="stylesheet" href="style.css">
        <script src="jscript.js"></script>
    </head>
    <body>
    </body>
</html>
window.onload = function() {
    var request = new XMLHttpRequest();
    var url = "http://mbigras.github.io/geolocation/data.json";
    request.open("GET", url);
    request.onload = function() {
        if (request.status == 200) {
            var object2 = JSON.parse(request.responseText);
            alert(object2.name + ", age " + object2.age);
        }
    }
    request.send(null);
};

因为当我使用XMLHttpRequest从github请求json数据时，页面不是从家里的计算机（本地机器上的index.html）提供的吗？还是我误解了什么？

这被称为跨来源策略。内容的主机（在本例中为github）可以将HTTP头发送回您的脚本，并说"嘿，您可以对我进行跨源请求！"。然后，您的web浏览器（符合同源策略）将允许请求发生。

实际上，最终丢弃跨源请求的是您的浏览器（而不是github服务器）。即使您向不允许跨来源请求的位置发出AJAX请求，浏览器仍在执行请求（称为飞行前请求）。

在实际请求启动之前，浏览器会向远程服务器发出飞行前请求，以检查是否允许您执行跨源请求。你的浏览器对远程服务器说："嘿，考虑到你在另一个域上，我可以向你请求吗？"如果在另一端运行的网络服务器没有用跨源头回复，那么答案是否定的。

在您引用的github url的情况下，github的web服务器会用跨源头进行回复，因此您的浏览器会说"太好了，谢谢！"并按照您的期望执行GET或POST请求。

服务器可以向客户端发送的跨来源标头的示例可以是：

Access-Control-Allow-Origin: http://bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Content-Type: text/html; charset=utf-8

在本例中，服务器告诉客户端"允许来自bob.com的请求，只要它们是GET、POST或PUT请求"

相关文章：