JS跨域

同源策略（所谓同源是指：域名、协议、端口相同。）

 同源策略（Same origin policy）是一种约定，它是浏览器最核心也最基本的安全功能，如果缺少了同源策略，则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的，浏览器只是针对同源策略的一种实现。

 

JSONP 跨域

由于 script 标签不受浏览器同源策略的影响，允许跨域引用资源。因此可以通过动态创建 script 标签，然后利用 src 属性进行跨域，这也就是 JSONP 跨域的基本原理。

 JSONP方式调用

1. 可以利用传统ajax实行实现数据请求
2. 利用js自动生成一个回调函数.并且名称随意,发送请求时自动携带回调函数名称.   url?callback="XXXXXXXX"
3. 动态获取回调函数名称,将数据进行封装  callback(JSON)

JSONP实现跨域

1.ajax请求

<script type="text/javascript">
    $(function(){
        alert("测试访问开始!!!!!")
        $.ajax({
            url:"http://manage.jt.com/web/testJSONP",
            type:"get",                //jsonp只能支持get请求
            dataType:"jsonp",       //dataType表示返回值类型
            jsonp: "callback",     //指定参数名称
            //jsonpCallback: "hello",  //指定回调函数名称
            success:function (data){   //data经过jQuery封装返回就是json串
                alert(data.itemId);
                alert(data.itemDesc);
                //转化为字符串使用
                //var obj = eval("("+data+")");
                //alert(obj.name);
            }    
        });    
    })
</script>

 

 2. 编辑manage的Controller

@RestController
public class JSONPController {
    
    //约定回调函数名称 callback
    @RequestMapping("/web/testJSONP")
    public String testJSONP(String callback) {
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(10001L)
                .setItemDesc("商品详情信息!!!!!!");
        String json = ObjectMapperUtil.toJSON(itemDesc);
        return callback+"("+json+")";
    }
}

 3.API实现JSONP访问

//利用API实现JSONP跨域访问
    @RequestMapping("/web/testJSONP")
    public JSONPObject testJSONP(String callback) {
        ItemDesc itemDesc = new ItemDesc();
itemDesc.setItemId(10001L)
                .setItemDesc("商品详情信息!!!!!!");
        return new JSONPObject(callback, itemDesc);
    }