乐趣区

关于java:跨域的实现

跨域拜访测试

同域测试

剖析

1. 浏览器地址:http://manage.jt.com/test.html
2. 浏览器地址: http://manage.jt.com/test.json

论断

当浏览器地址与 ajax 申请的地址 (协定:// 域名: 端口) 雷同时能够实现失常的任务调用.

跨域测试

剖析

1. 浏览器地址: http://www.jt.com/test.html
2.2.ajax 申请地址: http://manage.jt.com/test.json

论断

如果申请地址 (协定:// 域名: 端口) 不雷同则导致申请调用失败

浏览器 - 同源策略阐明

阐明: 浏览器规定发动 ajax 申请时如果申请协定 / 域名 / 端口号如果三种中有一个与以后浏览器的地址不雷同时, 则违反了同源策略的规定, 则浏览器不予以解析返回值.
跨域问题: 违反同源策略的规定就是跨域申请.

跨域 -JSONP

JSONP 垮域原理

1. 利用 javascrpit 中的 src 属性实现跨域申请.
2. 自定义回调函数 function callback(xxx).
3. 将返回值后果进行非凡格局封装 callback(json).
4. 因为利用 src 属性进行调用 所以只反对 get 申请类型
封装返回值
hello({"id":"1","name":"tom"})
页面 js 编辑
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP 测试 </title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<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 串
                console.log(data);
            }
        });    
    })
</script>
</head>
<body>
    <h1>JSON 跨域申请测试 </h1>
</body>
</html>

JSONP

JSONP(JSON with Padding)是 JSON 的一种应用模式, 可用于解决支流浏览器的跨域数据拜访问题. 因为同源策略, 一般来说位于 server1.example.com 的网页无奈与不是 server1.example.com 的服务器进行沟通.

JSONP 优化.

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>JSONP 测试 </title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<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 串
                console.log(data);
            }
        });    
    })
</script>
</head>
<body>
    <h1>JSON 跨域申请测试 </h1>
</body>
</html>

编辑后端 Controller

package com.jt.web.controller;

import com.jt.pojo.ItemDesc;
import com.jt.util.ObjectMapperUtil;
import jdk.nashorn.internal.runtime.regexp.JoniRegExp;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;

@RestController
public class JSONPController {

    /**
     * 实现 JSONP 跨域申请
     * url 地址: http://manage.jt.com/web/testJSONP?callback=xxxxxx
     * 参数:    临时没有能够不接
     * 返回值:  callback(JSON);
     */
     @RequestMapping("/web/testJSONP")
     public String testJSONP(String callback){ItemDesc itemDesc = new ItemDesc();
         itemDesc.setItemId(1000L).setItemDesc("JSONP 测试!!!");
         String json = ObjectMapperUtil.toJSON(itemDesc);
         return callback+"("+json+")";
     }

}

控制台输入

JSONPObject 阐明

 @RequestMapping("/web/testJSONP")
    public JSONPObject testJSONP(String callback){ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemId(1000L).setItemDesc("JSONP 测试!!!");
        return new JSONPObject(callback, itemDesc);
    }

cors 跨域形式

cors 调用原理

实现 cors 调用

package com.jt.config;

import org.springframework.context.annotation.Configuration;
import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;
@Configuration  // 标识我是一个配置类
public class CorsConfig implements WebMvcConfigurer {

    // 在后端 配置 cors 容许拜访的策略
    @Override
    public void addCorsMappings(CorsRegistry registry) {registry.addMapping("/**")
                .allowedMethods("GET","POST") // 定义容许跨域的申请类型
                .allowedOrigins("*")           // 任意网址都能够拜访
                .allowCredentials(true) // 是否容许携带 cookie
                .maxAge(1800);                 // 设定申请长链接超时工夫.
    }
}

cors 调用响应头解析

cors 跨域测试

JSON 数据格式

对于跨域的总结

1.jsonp

jsonp 实质利用 javaScript 中的 src 属性的 get 申请实现的跨域
返回值必须通过非凡格局封装

2.cors

增加在响应头中的信息, 指定在那些服务器中拜访
退出移动版