乐趣区

关于java:跨域实现

jiezi

同域测试

剖析：
1. 浏览器地址：http://manage.jt.com/test.html
2.ajax 申请地址：ajax 申请地址: http://manage.jt.com/test.json
论断：当浏览器地址与 ajax 申请的地址（协定：// 域名：端口）雷同时能够实现失常的业务调用。

<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
    <!-- 引入类库之后, 执行 js 代码 -->
<script type="text/javascript">
    <!-- 让整个页面加载实现之后执行 js-->
    $(function(){$.get("http://manage.jt.com/test.json",function(data){alert(data.name);
        })
    })
</script>

跨域测试

剖析：
1. 浏览器地址：浏览器地址: http://www.jt.com/test.html
2.ajax 申请地址：http://manage.jt.com/test.json
论断：
如果申请地址（协定：// 域名：端口）不雷同则导致申请调用失败。

浏览器 - 同源策略阐明

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

跨域的形式

1、JSONP 跨域
2、cors 跨域

JSONP 跨域原理

1. 利用 javascript 中的 src 属性实现跨域申请;
2. 自定义回调函数 function callback(xxxx);
3. 将返回值后果进行非凡的格局封装 callback(json);
4. 因为利用 src 属性进行调用，所以只能反对 get 申请类型。

封装返回值

hello({"id":"1","name":"tom"})

页面 js 编辑

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title> 测试 JSON 跨域问题 </title>    
    <script type="text/javascript">
        /*JS 是解释执行的语言  */
        /* 定义回调函数  */
        function hello(data){alert(data.name);
        }
    </script>
    <!-- 该 json 始终保留到浏览器中期待调用, 然而没有函数名称无奈调用  -->
    <script type="text/javascript" src="http://manage.jt.com/test.json"></script>
    <script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
</head>
<body>
    <h1>JS 跨域问题 </h1>
</body>
</html>

JSONP

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

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 调用

在公共配置文件中增加 cors 配置

@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
增加在响应头中信息. 指定哪些服务器容许拜访.

退出移动版