说到跨域的问题,我们先来理清同源和同源策略的知识,
同源:指协议、域名、端口三者都相同。
同源策略(same origin policy):是一种约定,它是浏览器最核心也是最基本的安全功能,缺少它浏览器的正常功能都可能会受到影响。Web是构建在同源策略之上的,浏览器只是针对同源策略的一种实现。
像<script>,<img>,<iframe>,<link>标签都可以跨域加载资源,不受同源策略的影响。
JSONP:
JSONP(JSON padding):是一种非官方跨域数据交换协议。在通信时,通过动态添加一个javascrip标签,请求的地址中一般会有一个callback参数,假设需要请求的地址为http://localhost:3000?callback=product,服务器返回的代码一般是product()的JSON数据,而product函数恰恰是前端需要用的这个数据的函数。如:
var script = doxument.createElement("script");
script.setAttribute("type", "text/javascript");
script.src="http://test.com/ip?callback=product";
document.body.appendChild(script);
function product(data) {
console.log('Your product is: '+data.ip);
}
JSONP解决跨域的本质:<script>标签可以请求不同域名下的资源,即<script>请求不受浏览器同源策略的影响。上例中的script会向http://test.com/服务器发送请求,这个请求的url后面带了个callback参数,是用来告诉服务器回调方法的方法名的。因为服务器收到请求后,会把相应的数据写进handleResponse的参数,也就是服务器会返回如下的脚本:
product({
"ip" : "127.0.0.1"
});
JSONP有一个很大问题,就是只能进行GET请求。