Java程序员从笨鸟到菜鸟(十一)解决跨域请求
原文转载来自: 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");
}
版权声明:欢迎转载, 转载请保留原文链接。https://mp.csdn.net/postedit/79525675