1.什么是跨域
我们经常会在页面上使用ajax请求访问其他服务器的数据,此时,客户端会出现跨域问题.
跨域问题是由于javascript语言安全限制中的同源策略造成的.
2. 解决方法：
2.1 使用 Access-Control-Allow-Origin
Access-Control-Allow-Origin是HTML5中定义的一种解决资源跨域的策略
使用方法，在response添加 Access-Control-Allow-Origin，例如 Access-Control-Allow-Origin:www.google.com
也可以设置为 * 表示该资源谁都可以用 Access-Control-Allow-Origin: * // php中这样使用 header('Access-Control-Allow-Origin: *');
如果资源是html页面，可以设置
但美中不足的是必须要支持h5游览器。
2.2 使用 jsonp
php代码：
js代码：
jsonp就是这么一个原理。
jsonp封装代码：
/*1. 每个jsonp请求唯一，防止缓存，每个请求存储内容如下
{
callback: function(){},
scriptNode: [domNode]
timer: [定时器]
}
2. src的参数需要编码
3. 请求超时,抛出错误
4. 使用说明，使用方式类似JQuey的ajax方式，例: jsonp({
url:[string],
data:[obj],
callback:[function],
fail: [function],
timeout: [number]
})*/function jsonp(opts) {
if(!opts || !opts.url) {
return;
}
// 初始化参数varoptions = {
url: opts.url,
data: opts.data ? opts.data :null,
callback: opts.callback ? opts.callback :null,
fail: opts.fail ? opts.fail :null,
timeout: opts.timeout ? opts.timeout : 3000 }
varhelper = {
joinURL: function(url, data) {
if(!url || !data) {
return;
}
for(variin data) {
if (data.hasOwnProperty(i)) {
if(url.indexOf("?") >= 0) {
url += "&";
} else {
url += "?";
}
url += i + "=" + data[i];
}
}
return url;
},
encodeURL: function(url) {
varparam = url.split("?")[1];
varurl = url.split("?")[0];
varparams = param.split("&");
varparLen = params.length;
for(vari = 0; i < parLen; i++) {
varpaItem = params[i].split("=");
url += url.indexOf("?") >= 0 ? "&" : "?";
url += encodeURIComponent(paItem[0]) + "=" + encodeURIComponent(paItem[1]);
}
return url;
},
};
// new Date().getTime()不够精确，加上count计数，确保唯一,也可以使用随机函数，但我认为这样更简单。if(window["count"]) {
window["count"]++;
} else {
window["count"] = 1;
}
// requestId 唯一jsonp请求varrequestId = "jsonp" +newDate().getTime() + window['count'];
varhead = document.getElementsByTagName("head")[0];
varscript =null;
window[requestId] = {};
// 请求值拼接到urlif (options.data) {
options.url = helper.joinURL(options.url, options.data);
}
//创建script结点script = document.createElement("script");
if(options.url.indexOf("?") >= 0) {
script.src = helper.encodeURL(options.url + "&callback=" + requestId + ".callback");
} else {
script.src = helper.encodeURL(options.url + "?callback=" + requestId + ".callback");
}
script.charset = "UTF-8";
head.appendChild(script);
window[requestId]["scriptNode"] = script;
//重新封装回调函数，调用后应删除script结点,删除该请求信息。window[requestId]['callback'] =function(data) {
try {
options.callback && options.callback(data);
} catch (e) {
console.log(e);
} finally {
head.removeChild(window[requestId]["scriptNode"]);
clearTimeout(window[requestId]["timer"]);
delete window[requestId];
}
};
// 超时调用window[requestId]["timer"] = setTimeout(function() {
//抛出异常，并做异常处理try {
thrownewError("over time");
} catch (e) {
if (options.fail) {
options.fail(e.message);
}
}
head.removeChild(window[requestId]["scriptNode"]);
delete window[requestId];
}, options.timeout);
}
