1、CORS就是一套AJAX跨域问题的解决方案。
2、CORS的原理: CORS定义一种跨域访问的机制,可以让AJAX实现跨域访问。
3、CORS浏览器支持情况:
Chrome 3+
Firefox 3.5
Opera 12+
Safari 4+
IE 8+
4、JS-Ajax相关:
ajax({ url : "XXXX", // 请求url method: options.type, // 请求方式 data: {"data" : "XXXX"}, //参数 success: function () { //成功 } }); function ajax(options) { options = options || {}; options.async = options.async || true; var params = ''; for (var item in options.data) { params += (item + '=' + options.data[item] + '&'); } if(params != ''){ params = params.substring(0,params.length - 1); } if (options.method === 'get') { options.url += options.url.indexOf('?') == -1 ? '?' + params : params; } var xhr = createCORSXHR(options.method, options.url); //创建XHR对象 if(xhr === null){ console.log("XMLHttpRequest对象创建失败"); return; } if (options.method === 'post') { //post方式需要自己设置http的请求头,来模仿表单提交。 //放在open方法之后,send方法之前。 if ("withCredentials" in xhr) { xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); } // 针对IE xhr.send(params); //post方式将数据放在send()方法里 } else { xhr.send(); //get方式则填null } xhr.onload = function(){ options.success(xhr.responseText); }; xhr.onerror = function(){ log.debug('ajax请求错误!'); }; } /** * 创建跨域XMLHttpRequest对象 * @param {String} method HttpMethod * @param {String} url 链接地址 * @return {Object} XMLHttpRequest对象 */ function createCORSXHR(method, url) { var xhr = new XMLHttpRequest(); if ("withCredentials" in xhr) { // 针对Chrome/Safari/Firefox. xhr.open(method, url, true); } else if (typeof XDomainRequest != "undefined") { // 针对IE xhr = new XDomainRequest(); xhr.open(method, url); } else { // 不支持CORS xhr = null; } return xhr; }
5、服务端:
// 跨域,只要在请求的接口加上这行代码 response.setHeader("Access-Control-Allow-Origin", "*"); //可以写成配置,指定域名