跨域常用解决方案之JSONP和CORS

JSONP

（1）写法1：

function testJsonp1(){
	$.ajax({
		type: "get",
		url: "http://xxx.com/jsonp",
		cache: false,
		data: {},
		dataType: "jsonp",
		jsonp: "callback",
		jsonpCallback:"这里指定回调函数名",
		success: function (result) {
			alert(result.code+result.msg);
		}
	});
}

（2）写法2：

function testJsonp2(){
	$.ajax({
		type: "get",
		url: "http://xxx.com/jsonp",
		cache: false,
		data: {},
		success: function (result) {
			alert(result.code+result.msg);
		}
	});
}

（3）jsonp默认为“callback”，可以不指定jsonpCallBack

（4）服务端代码：

String call=request.getParameter("callback");
return call+"("+JSON.toJSONString(baseResult)+");";

CORS

（1）简单方法请求：

客户端jquery不需要任何设置，服务端代码如下：

response.addHeader("Access-Control-Allow-Methods","GET,POST");
response.addHeader("Access-Control-Allow-Origin", "*");

为了安全起见，Access-Control-Allow-Origin可以自己指定。

（2）如果客户端请求时需要带上cookie

客户端jquery代码需要打开Credentials：

function testCors(){
	$.ajax({
		type: "post",
		url: "http://xxx.com/cors",
		cache: false,
		data: {},
		dataType: "json",
		xhrFields:{
			withCredentials:true
		},
		success: function (result) {
			alert(getCookie("cookieXxx"));
		}
	});
}

服务端代码如下：

response.setHeader("Access-Control-Allow-Origin",request.getHeader("origin"));
response.setHeader("Access-Control-Allow-Methods","GET,POST");
response.setHeader("Access-Control-Allow-Credentials","true");

需要说明2点：

• 客户端要传cookie时，Access-Control-Allow-Origin只能是客户端的Origin；
• 由于cookie还是受同源策略限制，所以客户端通过js还是获取不到服务端返回的cookie的，但是客户端下次请求时会带上服务端之前回写的cookie，一般是应用于单点登录。

（3）客户端请求时要带上自定义的header

客户端代码如下：

function testCors(){
	$.ajax({
		type: "post",
		url: "http://xxx.com/cors",
		cache: false,
		data: {},
		dataType: "json",
		beforeSend: function (xhr) {  
           		xhr.setRequestHeader("Test-Xxx", "xxx");  
        	}, 
		success: function (result, status, xhr) {
			alert(xhr.getResponseHeader("Xxx"));
		}
	});
}

服务端代码如下：

response.addHeader("Access-Control-Allow-Origin", "*");
response.addHeader("Access-Control-Allow-Methods","GET,POST");
if (request.getMethod().equals("OPTIONS")) {
    response.setStatus(HttpServletResponse.SC_NO_CONTENT);
}
response.setHeader("Access-Control-Allow-Headers","Test-Xxx");
response.setHeader("Access-Control-Max-Age","10");

需要说明几点：

• 对于自定义请求头的，浏览器会先发送一个方法为OPTIONS的预请求，询问服务端是否设置允许该自定义的请求头；
• 由于每次请求都要先进行预请求，比较影响性能，所以可以设置访问控制的缓存时间，使用Access-Control-Max-Age，单位是秒，使用Chrome浏览器测试时如果不设置，浏览器会默认5秒内不进行OPTIONS预请求；
• 跟上面的cookie一样，header也受同源策略的限制，客户端js是读取不到服务端设置的header的。