跨域

发表于   |   分类于   |  

对于web开发来讲，由于浏览器的同源策略，我们需要经常使用一些hack的方法去跨域获取资源，但是hack的方法总归是hack。直到W3C出了一个标准－CORS－”跨域资源共享”（Cross-origin resource sharing）。
它允许浏览器向跨源服务器，发出XMLHttpRequest请求，从而克服了AJAX只能同源使用的限制。

jsonp跨域

jsonp 是最常用的一种解决跨域的方式，但是只能发送get请求，并且需要前端和服务端限制好格式，写法相当丑陋，下面介绍下jsonp的用法：

前端：
首先全局编写一个函数，记住这个函数名字，并且这个函数接受一个参数，这个参数就是服务端返回给前端的数据，函数体就是处理返回给前端数据的具体实现。
然后动态生成一个script 标签，src为：请求资源的地址＋获取函数的字段名＋回调函数名称，这里的获取函数的字段名是要和服务端约定好的，是为了让服务端拿到回调函数名称。（如：www.xxx.com?callbackName=resolveJson）。

1
2
3
4
5
6
7
8
9
//前端全局函数
function resolveJosn(result) {
	console.log(result.name);
}
//访问后台代码
var jsonpScript= document.createElement("script");
jsonpScript.type = "text/javascript";
jsonpScript.src = "http://www.xxx.com?callbackName=resolveJson";
document.getElementsByTagName("head")[0].appendChild(jsonpScript);

服务端
在接受到浏览器端 script的请求之后，从url的query的callbackName获取到回调函数的名字，例子中是resolveJson。
然后动态生成一段javascript片段去给这个函数传入参数执行这个函数。比如：
resolveJson({name: ‘xxx’});
执行服务端返回这个 script 之后，浏览器端获取到 script 资源，然后会立即执行这个 javascript，也就是上面那个片段。这样就能根据之前写好的回调函数处理这些数据了。