前两天在stackoverflow里面提问res.jsonp的用法,被回答者嘲讽:现在是2017年了,还用jsonp? 用CORS跨域啊。
做为一名傻傻的业余爱好者,不明就里,居然问:是什么技术取代jsonp在CORS跨域里面使用? 估计回答的人已经吐血了,说:CORS就是一门技术。
后来自己去翻关于各方面CORS的技术博客,现在稍微懂了一点,在此做个笔记。
jsonp是属于比较老的技术,HTML5 支持跨域以后,就变成了CORS技术。 这是内置于http协议本身的。所以自然用起来更流畅,更舒心。
先来看一个客户端的AJAX吧
这是向服务端localhost:2000
提出ajax传输数据的申请, 并且把响应显示在浏览器上。
这个html网页本身是被设置运行在localhost:1338
的静态网页。
按照同源的规则,这两个虽然域名相同,但是端口不一样所以是非同源网站。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Jsonp example</title>
<script type="text/javascript" src="./jquery/dist/jquery.js"></script>
<script type="text/javascript">
function clickIt() {
var cors = document.getElementById('cors');
var xhr = new XMLHttpRequest();
xhr.open('POST', 'http://localhost:2000', true);
xhr.onload = function (e) {
document.getElementById("result").innerHTML = xhr.responseText;
};
xhr.send('this is a CORS request!');
}