1.为什么会有跨域？
随着软件开发分工趋于精细，前后端开发分离成为趋势，前端同事负责前端页面的展示及页面逻辑处理，服务端同事负责业务逻辑处理同时通过API为前端提供数据也为前端提供数据的持久化能力，考虑到前后端同事开发工具和习惯的不同，必然需要将前后端项目进行独立，再者考虑到网站访问速度的问题，需要将静态资源部署到CDN服务器上这样项目分离也成为了必然。然而项目分离部署分离带来的问题就是跨域请求的问题。
本例对比较流行的两种跨域访问方式（Jsonp和CORS）进行讨论。（注：示例代码附在文章末尾处）
1.JSONP
JSONP是利用浏览器对script的资源引用没有同源限制，通过动态插入一个script标签，当资源加载到页面后会立即执行的原理实现跨域的。JSONP是一种非正式传输协议，该协议的一个要点就是允许用户传递一个callback或者开始就定义一个回调方法，参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。
JSONP只支持GET请求而不支持POST等其它类型的HTTP请求,它只支持跨域HTTP请求这种情况，不能解决不同域的两个页面之间如何进行JavaScript调用的问题，JSONP的优势在于支持老式浏览器，弊端也比较明显：需要客户端和服务端定制进行开发，服务端返回的数据不能是标准的Json数据，而是callback包裹的数据。
2.CORS
CORS是现代浏览器支持跨域资源请求的一种方式，全称是"跨域资源共享"（Cross-origin resource sharing），当使用XMLHttpRequest发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：Access-Control-Allow-Origin;浏览器判断该相应头中是否包含Origin的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。
CORS与JSONP的使用目的相同，但是比JSONP更强大，CORS支持所有的浏览器请求类型，承载的请求数据量更大，开放更简洁，服务端只需要将处理后的数据直接返回，不需要再特殊处理。
1.不需要操作cookie
只需要设置:setHeader("Access-Control-Allow-Origin","url/*")
2.如果需要操作cookie
前台:js需要增加参数:{'withCredentials':true}
后台:
setHeader("Access-Control-Allow-Origin","url") //注意:地址不能使用"*"代表所有
setHeader("Access-Control-Allow-Credentials","true") //支持操作cookie
注解方式:spring4.2版本以后提供了对跨域注解的支持，可以使用注解 @CorsOrigin
因需要实现跨域请求，跨域可以是：协议不一样,域名不一样,ip地址不一样,端口号不一样等多种情况。为了简单，下面示例代码使用tomcat服务器，端口号不同，分别部署两个项目，项目之间进行数据交互，验证跨域请求.
2个项目，展示如下：
1.JSONP示例代码:
1.1jsonp前端代码：（注：代码在demo1项目中）
function jsonpTest1() {//传统支持jsonp的方案
$.ajax({
url: 'http://localhost:8081/jsonp_demo2/jsonp/test1.do',
dataType: 'jsonp',
success: function (res, status, xhr) {
alert(status);
alert(res.msg);
}
});
}
function jsonpTest2() {//使用MappingJacksonValue，从spring4.1以后版本才可以使用
$.ajax({
url: 'http://localhost:8081/jsonp_demo2/jsonp/test2.do',
dataType: 'jsonp',
success: function (res, status, xhr) {
alert(status);
var resJson = $.parseJSON(res);
alert(resJson.msg);
}
});
}
1.2jsonp后台代码：（注：代码在demo2项目中）
/**
* @author:admin
* 20182018年3月30日上午11:03:03
*/
/**
* 描述:
* @author zhuan
* @version 2018年3月30日 上午11:03:03
*/
package com.itcast.controller;
import org.apache.commons.lang3.StringUtils;
import org.springframework.http.converter.json.MappingJacksonValue;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import org.springframework.http.MediaType;
/**
* JS跨域解决方案一
* 描述:JSONP跨域请求controller
* @author zhuan
* @version 2018年3月31日 上午9:58:50
*/
@RestController
@RequestMapping("/jsonp")
public class JsonpController{
/**
*
* 描述:传统支持jsonp的方案
* @param param
* @param callback
* @return
*/
@RequestMapping(value = "/test1", produces = MediaType.APPLICATION_JSON_VALUE + ";charset=utf-8")
public String jsonTest1(String param, String callback) {
if (StringUtils.isNotBlank(callback)) {
// 客户端为jsonp请求。需要返回js代码
String jsonResutl = callback + "({\"type\":\"json\",\"msg\":\"test1 jsonp request success\"})";
return jsonResutl;
}
return "{\"type\":\"json\",\"msg\":\"test1 json request success\"}";
}
/**
*
* 描述:从spring4.1以后版本才可以使用
*
* @param param
* @param callback
* @return
*/
@RequestMapping("/test2")
public Object jsonTest2(String param,String callback){
if(StringUtils.isNotBlank(callback)){
MappingJacksonValue mappingJacksonValue = new MappingJacksonValue("{\"type\":\"jsonp\",\"msg\":\"test2 jsonp request success\"}");
//设置回调方法
mappingJacksonValue.setJsonpFunction(callback);
return mappingJacksonValue;
}
return "{\"type\":\"json\",\"msg\":\"test2 json request success\"}";
}
}
2.CORS示例代码:
2.1cors前端代码：（注：代码在demo1项目中）
function corsTest() {
$.ajax({
url: 'http://localhost:8081/jsonp_demo2/cors/test.do',
dataType: 'json',
success: function (res, status, xhr) {
alert(status);
alert(res.msg);
}
});
}
2.2cors后台代码：（注：代码在demo2项目中）
package com.itcast.controller;
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
/**
* JS跨域解决方案二 描述:CORS跨域请求controller
*
* @author zhuan
* @version 2018年3月31日 上午9:58:50
*/
@RestController
@RequestMapping("/cors")
public class CorsController {
// 1.不支持操作cookie
// 只需要设置:setHeader("Access-Control-Allow-Origin","url/*")
// 2.支持操作cookie
// 前台:
// js需要增加参数:{'withCredentials':true}
// 后台:
// setHeader("Access-Control-Allow-Origin","url") //注意:地址不能使用"*"代表所有
// setHeader("Access-Control-Allow-Credentials","true") //支持操作cookie
// 注解方式:spring4.2版本以后提供了对跨域注解的支持 @CorsOrigin
/**
*
* 描述:
*
* @param param
* @param callback
* @return
*/
@RequestMapping("/test")
@CrossOrigin(origins = "http://localhost:8080")
public String corsTest1(String param) {
return "{\"type\":\"json\",\"msg\":\"cors json request success\"}";
}
}
