如何实现页面的跨域访问，页面(ajax)跨域访问问题（JSONP与CORS两种实现方式）

最新推荐文章于 2023-02-23 23:57:38 发布

淡抹宜人妆

最新推荐文章于 2023-02-23 23:57:38 发布

阅读量797

点赞数

分类专栏：网络文章标签： java ajax js javascript maven，dubbo

本文链接：https://blog.csdn.net/Light_makeup/article/details/107334086

版权

网络专栏收录该内容

2 篇文章 0 订阅

订阅专栏

1.通过script中的src属性实现跨域

3.尝试跨域访问（当前所在域名：www.wph.com,ajax跨域访问：www.manage.com）

最后

什么叫做跨域访问？

页面中的AJAX请求的域名与当前所在的域名不相同，违背了同源策略，这种访问方式叫做跨域访问。

同源策略

在浏览器中发起AJAX请求时，需要同时满足三个条件，否则浏览器不予解析返回值：

请求的协议与当前协议相同 HTTP/HTTPS
请求的域名与当前域名相同
请求的端口与当期端口相同

跨域访问实现

方式一、JSONP

JSONP介绍

JSONP(JSON with Padding)是[JSON]的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问题。由于同源策略，一般来说位于 server1.example.com 的网页无法与不是 server1.example.com的服务器沟通，而 HTML 的<script> 元素是一个例外。利用 <script> 元素的这个开放策略，网页可以得到从其他来源动态产生的 JSON 资料，而这种使用模式就是所谓的 JSONP。用 JSONP 抓到的资料并不是 JSON，而是任意的JavaScript，用 JavaScript 直译器执行而不是用 JSON 解析器解析。
信息:  解决跨域/利用<javascrit>标签实现跨域.

1.通过script中的src属性实现跨域

<script type="text/javascript" src="http://www.manage.com/test.json"></script>

2.测试访问的JSON数据

test.json是json格式的一串数据

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

3.手写回调函数

function hello(data){
  console.log(data)
}

4.示例

<head>
<meta charset="UTF-8">
<title>测试JSON跨域问题</title>
<script type="text/javascript">
	function hello(data){
		console.log(data)
	}
</script><!-- 其实是相当于src=hello({"id":1,"name":"jack"})执行了hello函数 -->
<script type="text/javascript" src="http://www.manage.com/test.json"></script>
</head>

JSONP方式的优化

JQuery框架的AJAX函数帮我们做了优化，底层还是src，我们只需要使用即可

唯一遗憾的是它只支持GET请求

1.编辑AJAX函数(当前所在域名：www.wph.com,ajax跨域访问：www.manage.com)

 $.ajax({
            url:"http://www.manage.com/web/test",
            type:"get",             //jsonp只能支持get请求
            dataType:"jsonp",       //dataType表示返回值类型
            //jsonp: "callback",    //指定参数名称
            //#jsonpCallback: "hello",  //指定回调函数名称
            success:function (data){   //data经过jQuery封装返回就是json串
                alert("ajax跨域成功!!!!!");
                console.log(data.itemId);
                console.log(data.itemDesc);
                //转化为字符串使用
                //var obj = eval("("+data+")");
                //alert(obj.name);
            }   
        });

2.控制层代码

注意：如果为ajax的JSONP跨域请求，方法返回值必须是JSONPObject

 @RequestMapping("/web/test")
    public JSONPObject testJSONP2(String callback) {
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemDesc("测试数据");
        itemDesc.setItemId(10L);
        
        return new JSONPObject(callback, itemDesc);
    }
   /**手动拼写callback
   public String testJSONP(String callback) {
        
        ItemDesc itemDesc = new ItemDesc();
        itemDesc.setItemDesc("测试数据");
        itemDesc.setItemId(10L);
        String json = ObjectMapperUtil.toJSON(itemDesc);
        //需要手动的拼接json串
        return callback+"("+json+")";
    }*/

3.控制台结果

方式二、CORS

CORS介绍

CORS当下主流浏览器都支持.CORS跨域通过浏览器添加请求头信息实现的.同时服务器必须实现cors的接口才能实现跨域访问.

1.添加CORS配置类

@Configuration
public class CorsMVCConfig implements WebMvcConfigurer{
    
    //重写关于服务器跨域访问的策略
    @Override
    public void addCorsMappings(CorsRegistry registry) {
         registry.addMapping("/**") //标识所有的请求可以跨域
                 .allowedOrigins("http://www.wph.com") //允许哪个网址访问 
                 .allowedMethods("GET", "POST", "DELETE", "PUT", "OPTIONS","HEAD")   //请求类型
                 .allowCredentials(true) //是否允许携带cookie
                 //1.如果需要进行跨域访问,首先试探性的发起请求.(询问)
                 //如果服务器允许跨域则在一定的时间之内无需再次试探  默认30分钟
                 .maxAge(3600); //校验请求的有效期
    }
}

配置类在公共的工具项目下(common)

而项目中都依赖了这个common项目

2.cors.json内容

{"id":"1","name":"jack"}

3.尝试跨域访问（当前所在域名：www.wph.com,ajax跨域访问：www.manage.com）

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>测试JSON跨域问题</title>
<script type="text/javascript" src="http://manage.jt.com/js/jquery-easyui-1.4.1/jquery.min.js"></script>
<script type="text/javascript">
    /*$(){}结构必然是jQuery函数类库导入后才能正确执行*/
    $(function(){   //是因为jQuery类库定义了该函数(函数名称),所以可以被人调用
        alert("我执行了跨域访问");
        //利用jQuery发起AJAX请求
        $.get("http://www.manage.com/cors.json",function(data){
            alert(data.name);
        })
    })
</script>
</head>
<body>
    <h1>JSON跨域请求测试</h1>
</body>
</html>

最后

注意：JSONP与CORS是用户在页面发起的跨域请求,而HttpClient与Dubbo是在服务器内部的跨域请求

1.httpClient 万能的调用方式访问任意的远程服务器，如果是业务层需要数据,一般首选httpClient.

【HttpClient调用流程图】

https://shimo.im/docs/JTY3cWW9Vh9k6yYy/ 《HttpClient的基本应用》

2.Dubbo方法远程调用利用RPC技术实现远程调用. 调用远程服务器像调用本地服务一样. 只能完成系统内部的调用

【Dubbo调用流程图】

3.JSONP 利用JSONP能够实现跨域访问,要求服务器必须按照跨域的形式返回

【JSONP调用流程图】

4.如果是页面需要数据,一般首选jsonp/httpClient

淡抹宜人妆

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
如何实现页面的跨域访问，页面(ajax)跨域访问问题（JSONP与CORS两种实现方式）

什么叫做跨域访问？页面中的AJAX请求的域名与当前所在的域名不相同，违背了同源策略，这种访问方式叫做跨域访问。同源策略在浏览器中发起AJAX请求时，需要同时满足三个条件，否则浏览器不予解析返回值：请求的协议与当前协议相同 HTTP/HTTPS 请求的域名与当前域名相同请求的端口与当期端口相同跨域访问实现方式一、JSONPJSONP介绍JSONP(JSON with Padding)是[JSON]的一种“使用模式”，可用于解决主流浏览器的跨域数据访问的问...
复制链接

扫一扫