Java程序员从笨鸟到菜鸟（十一）解决跨域请求

最新推荐文章于 2023-10-01 16:12:34 发布

明割啦

最新推荐文章于 2023-10-01 16:12:34 发布

阅读量224

点赞数

分类专栏： java web 文章标签：同源策略跨域请求 JSONP

java web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

原文转载来自： http://blog.csdn.net/u014607184/article/details/52027879

要理解跨域请求，首先了解“同源策略”。

1. 同源策略

是一种约定，它是浏览器最核心也最基本的安全功能，可以说浏览器只是同源策略的一种实现，详细解释见同源策略

同源即指：协议、域名、端口都相同。

常见的是否同源可参照下表：

注：全文以请求访问豆瓣中一本名叫javascript的详细信息为例。

通过如下代码来演示跨域请求报错：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>多种方式实现跨域请求</title>
</head>
<body>
    <h2>受同源策略约束，不能实现跨域访问数据</h2><br/>
    <div>
    	<Button id = "btn">点击</Button>
    </div>
    <script type="text/javascript">
	window.onload = function() {
		var btn = document.getElementById('btn');
		// 浏览器受同源策略的约束，无法跨域获取数据
		btn.onclick = function(){
			var xhr = new XMLHttpRequest();
			xhr.open("get","https://api.douban.com/v2/book/search?q=javascript&count=1",true);
			xhr.send(null);
			if(xhr.readyState == 4 && xhr.status == 200) {
				console.log(response);	
			}
		};
	};
    </script>
</body>
</html>

运行结果报错：

<img>的src、<link>的href、<script>的src三种标签不符合同源策略，可以实现跨域访问。

2. JSONP解决跨域请求

JSONP 是 JSON with padding（填充式 JSON 或参数式 JSON）的简写

实现原理：动态创建<script>标签，然后通过<script>的src不受同源策略的约束来实现跨域请求。

JSONP 组成：回调函数和数据。回调函数是当响应到来时应该在页面中调用的函数。回调函数的名字一般是在请求中指定的。而数据就是传入回调函数中的 JSON 数据。

JSONP是现在比较流行的一种解决跨域请求的方式，实现也比较简单，但是也有缺点：

1. 安全问题：JSONP是从其它域请求获取数据，无法保证数据源的安全性，可能会夹杂一些恶意代码，此时只有完全弃用JSONP，所以在使用JSONP实现跨域请求时一定要保证数据源的安全性。

2. 确定请求是否成功：不容易确定JSONP请求是否失败，程序员目前只能使用定时器检测指定时间内是否收到响应。

3. jQuery封装的JSONP

原理：jQuery封装的ajax有一个dataType属性，只要将dataType的属性设置成“jsonp”就能实现跨域请求

也可以通过$.getJSON()来实现跨域请求。

原理：只需要在地址栏加上callback=？即可

下面以更直观的代码示例来展示使用 jsonp 方式解决跨域问题，前后端代码实现：

前端：页面访问本地 tomcat 服务器的数据，前端指定回调函数的名称 jsonpCallback

    <div>
    	<Button id = "btn">点击</Button>
    </div>
    <script type="text/javascript">
	function handler(response) {
		alert('123');
		console.log(response);	
	}
	window.onload = function() {
		var btn = document.getElementById('btn');
		btn.onclick = function(){
			$.ajax({
				type: 'get',
				url: 'http://localhost:8001/user/getAllUser',
				async: false,
				dataType: 'jsonp',
				jsonpCallback:"jsonpCallback",
				success: function(data) {
					console.log(data);
				}
			})
		};
	};
    </script>

后端：在返回 json 数据的基础上加上 “jsonpCallback("")"

    @RequestMapping(value = "/getAllUser",  produces = "application/json; charset=utf-8", method = RequestMethod.GET)
    @ResponseBody
    public String getAllUser() {
        try {
            List<User> user = userService.getAllUser();
            Map<String, Object> map = new HashMap<String, Object>();
            map.put("total", user.size());
            map.put("rows", user);
            ObjectMapper mapper = new ObjectMapper();
            String json = mapper.writeValueAsString(map);
            String jsonp = ("jsonpCallback(" + json + ")");
            return jsonp;
        } catch(Exception e) {
            return "";
        }
    }

运行结果：

jsonp 格式的数据：

3. 在服务端加上如下代码：

        response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));
        response.setHeader("Access-Control-Allow-Credentials", "true");
        response.setHeader("P3P", "CP=CAO PSA OUR");
        if (request.getHeader("Access-Control-Request-Method") != null && "OPTIONS".equals(request.getMethod())) {
        response.addHeader("Access-Control-Allow-Methods", "POST,GET,TRACE,OPTIONS");
        response.addHeader("Access-Control-Allow-Headers", "Content-Type,Origin,Accept");
        response.addHeader("Access-Control-Max-Age", "120");
    }

明割啦

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Java程序员从笨鸟到菜鸟（十一）解决跨域请求

原文转载来自： http://blog.csdn.net/u014607184/article/details/52027879要理解跨域请求，首先了解“同源策略”。1. 同源策略是一种约定，它是浏览器最核心也最基本的安全功能，可以说浏览器只是同源策略的一种实现，详细解释见同源策略同源即指：协议、域名、端口都相同。常见的是否同源可参照下表：注：全文以请求访问豆瓣中一本名...
复制链接

扫一扫

专栏目录