JSONP实现跨域请求

1、跨域问题的由来

跨域是由于浏览器的同源策略（Same Origin Policy）引起的，页面脚本只能访问协议相同（如都为http协议）、端口相同（如都为80端口）、域名相同（如都为baidu.com）的同源数据。

2、JSONP解决跨域问题的原理

  2.1、JSON与JSONP的区别

JSON：即JavaScript Object Notation，是一种轻量级的数据交换格式；

JSONP：JSON with Padding，是JSON的 一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题；

  2.2、原理

<script> 是HTML中的特殊元素，网页脚本可以通过该元素得到从其他来源动态产生的 JSON 数据，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。

Web页面上调用js文件时不受是否跨域的影响，而且拥有”src”这个属性的标签都拥有跨域的能力，比如<script>、<img>、<iframe>，通过使用html的script标记来进行跨域请求，并在响应中返回要执行的script代码，其中可以直接使用JSON传递 javascript对象。即在跨域的服务端生成JSON数据，然后包装成script脚本回传。

3、JSONP的使用

  3.1、通过JavaScript

<script type="text/javascript">
    function handleResponse(response){
        console.log(response);
    }
</script>
<script type="text/javascript">
window.onload = function(){
    var oBtn = document.getElementById('btn');
    oBtn.onclick = function() { 
        var script = document.createElement("script");
        script.src = "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=handleResponse";
        document.body.insertBefore(script, document.body.firstChild);   
    };
});
</script>

  3.2、jQuery封装JSONP

$(function(){
    $("#btn").click(function(){
        $.ajax({
            async : true,
            url : "https://api.douban.com/v2/book/search",
            type : "GET",
            dataType : "jsonp", // 返回的数据类型，设置为JSONP方式
            jsonp : 'callback', //指定一个查询参数名称来覆盖默认的 jsonp 回调参数名 callback
            jsonpCallback: 'handleResponse', //设置回调函数名
            data : {
                q : "javascript", 
                count : 1
            }, 
            success: function(response, status, xhr){
                console.log('状态为：' + status + ',状态是：' + xhr.statusText);
                console.log(response);
            }
        });
    });
});

  3.3、通过$.getJSON(）

$(function(){
    $.getJSON(
        "https://api.douban.com/v2/book/search?q=javascript&count=1&callback=?",
        function(data){
            console.log(data);
        }
    );
});

4、注意

 4.1、请求时报错：CORS 头缺少 'Access-Control-Allow-Origin'

解决方法一：后端返回的响应头中加入参数“Access-Control-Allow-Origin”，表示允许网站接收服务器返回的资源

@RequestMapping(value = "/login", method = RequestMethod.POST)
@ResponseBody 
public String signIn(@RequestParam String user, @RequestParam String password, HttpServletResponse response) {
    response.setHeader("Access-Control-Allow-Origin", "*"); 
    return accountService.signIn(user, password);
}

解决方法二：使用"@CrossOrigin"注解，加在controller则对该controller下所有方法有效，加在具体方法则仅对该方法有效

@Controller 
@RequestMapping(value = "/Account", produces = { "text/html;charset=UTF-8;", "application/json;charset=UTF-8;" }) 
@CrossOrigin(origins = "*", maxAge = 3600) 
public class AccountController {
}