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

最新推荐文章于 2021-12-08 09:11:57 发布

原创最新推荐文章于 2021-12-08 09:11:57 发布 · 1.1k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#java #ajax #js #javascript #maven，dubbo

网络专栏收录该内容

2 篇文章

订阅专栏

本文深入讲解跨域访问的概念，探讨同源策略限制下如何通过JSONP和CORS两种方式实现跨域请求，辅以实例说明及优化技巧。

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>