聊聊为什么 XMLHTTPRequest 不能跨域请求资源首先简单聊一下什么是 XMLHTTPRequest 历史： 1

本文已参与掘金创作者训练营第三期「话题写作」赛道，详情查看：掘力计划｜创作者训练营第三期正在进行，「写」出个人影响力。

简单粗暴的回答就是同源策略导致的不能跨域请求资源，接下来会为大奖详细的去解读为什么 XMLHTTPRequest 不能跨域请求资源。

首先简单聊一下什么是 XMLHTTPRequest

历史： 1999年诞生，微软在IE5中集成了XMLHttpRequest对象，但是并没有受到人们重视。 2005年，google在gtalk即时聊天工具中使用了该对象，从此之后Ajax技术开始受到人们的重视

创建XMLHTTPRequest对象要分为(低版本) IE和非IE两种方式(主流)

IE浏览器（IE7之前） :

      var xhr = new ActiveXObject('Msxml2.XMLHTTP');

非IE浏览器（chrome、firefox、safair、搜狗等，包括IE7+之后） (主流浏览器):

 var xhr = new XMLHttpRequest();

案例： 创建XMLHttpRequest对象，兼容IE7之前和主流浏览器

//创建XMLHttpRequest对象，兼容低版本IE和非IE浏览器
function getXhr () {
    var xmlhttp;

    if (window.XMLHttpRequest) {
        //IE7+ 和 非IE 中都有 XMLHttpRequest对象
        xmlhttp = new XMLHttpRequest();
    } else {
    	//低版本IE浏览器 实例化方式
        xmlhttp = new ActiveXObject('Msxml2.XMLHTTP');
    }

    return xmlhttp;
}

XMLHttpRequest 对象是 W3C 的标准吗？

任何 W3C 推荐标准均未规定 XMLHttpRequest 对象。

不过，W3C DOM Level 3 的 "Load and Save" 规范包含了一些相似的功能性，但是还没有任何浏览器实现它们。

再聊一下什么是跨域

跨域：浏览器不能执行其他网站的脚本。简单来说，就是网站A去调用网站B的数据。

常见案例：hao123.com的天气预报。

跨域导致的原因

由浏览器的同源策略造成的,是浏览器对 JavaScript 实施的安全限制。

什么是同源策略

同源策略（Same origin policy）是一种约定，他是浏览器的一种安全功能。

同源策略会隔离不同源的 DOM、页面数据和网络通信，进而实现 Web 页面的安全性。

何为同源

同源：同协议，同域名，同端口；不同源则为跨域。

例子👀 与wwww.baidu.com/ 相对比

网址	是否同源	原因
api.baidu.com/details.htm…	否	域名不同
www.baidu.com/details.htm…	否	协议不同
www.baidu.com:8088/details.htm…	否	端口不同
api.baidu.com:8080/details.htm…	否	域名、端口不同
api.baidu.com/details.htm…	否	协议、域名不同
www.baidu.com:8080/details.htm…	否	协议、端口不同
www.baidu.com/details/ind…	是	只是目录不同