AJAX-CORS 跨域

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", "*"); //可以寫成配置，指定域名