为了跟上新的潮流,学习前后端分离的概念及技术是必须的,跨域也随之而产生。
首先确定什么是前后端分离,它不仅是对代码的解耦,也是对开发人员的解耦,真正的前端是前端,后台是后台,开发速度至少快一倍。
即你是后台,可以不用写太多前端代码,设计什么ui等等,都交给了前端人员,
前端人员也是如此。
说到底,还是有人关心在这种模式该使用什么数据格式通信,无疑是json.
在此之后随之而来的是很多的跨域问题。
首先跨域请求需要一些关于计算机网络的知识补充,你需要在请求中设置一些特殊信息来规定怎么跨域。
关于域的同源与不同源:
通过协议(http,https),ip,port,三者两两组合每一个为一种情况,每一种都是不同源,
仅者都相同时才是同源。
关于常见跨域的方式简介:
cors与jsonp
介绍几个关于response的header信息:
请求协议 | 作用 |
---|---|
Access-Control-Allow-Headers | 允许哪个地址访问,可以设参数任何即*,或者某一特定http://ip:port,必须 |
Access-Control-Allow-Credentials | 设为参数布尔值true,允许携带cookies,必须 |
Access-Control-Max-Age | 是否在下次请求时缓存上次的请求结果,参数为时间ms |
Access-Control-Allow-Methods | 允许那些形式的请求方法通过,例如get,post… |
加一段服务端java的filter代码:
// 简单Accept, Accept-Language, Content-Language, Content-Type与不简单请求
// Accept
// Accept-Language
// Content-Language
// Last-Event-ID
// Content-Type,但仅能是下列之一
// application/x-www-form-urlencoded
// multipart/form-data
// text/plain
// response2.setHeader("Access-Control-Allow-Headers", "Content-Type:");
// 请求最大连接时长,不需要再发送预检验请求,可以缓存该结果
// response2.setHeader("Access-Control-Max-Age", "300");
// 统一utf-8
//response2.setHeader("Content-Type", "application/json");
// 允许所有域的访问
response2.setHeader("Access-Control-Allow-Origin", "http://localhost:5501");
// 允许携带cookies
response2.setHeader("Access-Control-Allow-Credentials", "true");
再加一段前端的跨域ajax请求代码:
$.ajax({
type: 'post',
url: 'index/selectAllByPage.action',
data: {
'limit': limit,
'page': obj.curr
//Math.floor(count/10)
},
xhrFields: {
withCredentials: true
},
dataType: 'json',
success: function(result) {
if (result === "") {
$('#index_comment').append("请求错误!");
return false;
}
});
}
});
其中:
xhrFields: {
withCredentials: true
},
很重要,是ajax跨域的条件之一,不然不能提交数据
ok,大概就是这样