JavaScript XMLHttpRequest 同源限制及CORS杂谈

Posted 百世之无变足以为道贯

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了JavaScript XMLHttpRequest 同源限制及CORS杂谈相关的知识,希望对你有一定的参考价值。

XMLHttpRequest

AJAX , Asynchronous JavaScript and XML 的缩写,原指的是通过 javascript 的异步通信,从服务器获取 XML 文档从中提取数据,再更新当前网页的对应部分,而不用刷新整个网页。

现在,服务器返回的都是JSON格式的数据,但AJAX已经成了一个通用名词,被泛化了。XMLHttpRequest对象是 AJAX 的主要接口,它实际上可以使用多种协议(比如fileftp),发送任何格式的数据(包括字符串和二进制)

# 构造实例
var xhr = new XMLHttpRequest();
#打开连接
xhr.open(‘GET‘, ‘http://www.example.com/page.php‘, true);
# 回调监听
xhr.onreadystatechange = handleStateChange;

function handleStateChange() {
  // ...
}
# 发送请求
xhr.send(null)

AJAX 只能向同源网址(协议、域名、端口都相同)发出 HTTP 请求,如果发出跨域请求

同源限制

浏览器安全的基石是“同源政策” (same-origin policy)
最初三个相同:

协议相同
域名相同
端口相同

随着互联网的发展,同源政策越来越严格,非同源有以下三种行为受到限制

(1) 无法读取非同源网页的 Cookie、LocalStorage 和 IndexedDB。
(2) 无法接触非同源网页的 DOM。
(3) 无法向非同源地址发送 AJAX 请求(可以发送,但浏览器会拒绝接受响应)。

AJAX请求如何跨域

  • JSONP
    只能发GET请求
function addScriptTag(src) {
  var script = document.createElement(‘script‘);
  script.setAttribute(‘type‘, ‘text/javascript‘);
  script.src = src;
  document.body.appendChild(script);
}

window.onload = function () {
  addScriptTag(‘http://example.com/ip?callback=foo‘);
}

function foo(data) {
  console.log(‘Your public IP address is: ‘ + data.ip);
};
  • WebSocket
GET /chat HTTP/1.1
Host: server.example.com
Upgrade: websocket
Connection: Upgrade
Sec-WebSocket-Key: x3JJHMbDL1EzLkh9GBhXDw==
Sec-WebSocket-Protocol: chat, superchat
Sec-WebSocket-Version: 13
Origin: http://example.com

正是因为有了Origin这个字段,所以 WebSocket 才没有实行同源政策。因为服务器可以根据这个字段,判断是否许可本次通信

  • CORS
    CORS 是跨源资源分享(Cross-Origin Resource Sharing)的缩写。它是 W3C 标准,属于跨源 AJAX 请求的根本解决方法

CORS

CORS 需要浏览器和服务器同时支持,整个通信过程,都是浏览器自动完成。与普通AJAX通信没有差别,代码完全一样。浏览器一旦发现 AJAX 请求跨域,就会自动添加一些附加的头信息,有时还会多出一次附加的请求,但用户不会有感知。因此,实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口,就可以跨域通信

  • 简单请求
  • 非简单请求
    CORS 与 JSONP 的使用目的相同,但是比 JSONP 更强大。JSONP 只支持GET请求,CORS 支持所有类型的 HTTP 请求。JSONP 的优势在于支持老式浏览器,以及可以向不支持 CORS 的网站请求数据。

以上是关于JavaScript XMLHttpRequest 同源限制及CORS杂谈的主要内容,如果未能解决你的问题,请参考以下文章

执行用包含脚本标签的 XMLHttpRequest 编写的 Javascript?

运行使用 XMLHttpRequest 下载的 JavaScript

JavaScript中的XMLHttpRequest与WebAPI

JavaScript(Navigator/Screen/Cookie/XMLHttpRequest/CORS)

如何处理 XMLHttpRequest 下载文件中的 javascript? [复制]

如何在 JavaScript 中使用 XMLHttpRequest 设置 Cookie(标头)?