Q1: 什么是跨域?
A1: 一个域上加载的脚本获取或操作另一个域上的文档属性,是指a页面想获取b页面资源,如果a、b页面的协议、域名、端口、子域名不同,或是a页面为ip地址,b页面为域名地址,所进行的访问行动都是跨域的。而浏览器为了安全问题一般都限制了跨域访问,也就是不允许跨域请求资源。
Q2: 怎么算跨域?
A2:
Uri | 说明 | 是否跨域 |
---|---|---|
http://www.cnblogs.com/a.js http://www.a.com/b.js |
不同域名 | 是 |
http://www.a.com/lab/a.js http://www.a.com/script/b.js |
同域名下不同文件 | 否 |
http://www.a.com:8000/a.js http://www.a.com/b.js |
同域名下不同端口 | 是 |
http://www.a.com/a.js s https://www.a.com/b.js |
同域名 不同协议 | 是 |
http://www.a.com/a.js http://70.32.92.74/b.jss |
域名和域名对应ip | 是 |
http://www.a.com/a.js http://script.a.com/b.js |
主域名相同 子域名不同 | 是(cookie不可访问) |
http://www.a.com/a.js http://a.com/b.js |
同一域名,不同二级域名(同上) | 是 |
Q3: 什么是浏览器的同源策略?
A3: 计算机的本地与Web是不同的层面,Web世界(通常称为Internet域)运行在浏览器上,而被限制了直接进行本地数据(通常称为本地域)的读写。同源策略是众多安全策略的一个,是Web层面上的策略,同源策略规定:不同域的客户端脚本在没明确授权的情况下,不能读写对方的资源。
Q4: 怎么解决跨域?
A4: 有那么几种方法可以来解决跨域:
1、Jsonp 需要目标服务器配合一个callback函数,但是注意JSONP只支持GET请求,不支持POST请求。
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$.ajax({
url: api.testURI,
dataType:'jsonp',
data:'',
jsonp:'callback',
success:function(result) {
for(var i in result) {
alert(i+":"+result[i]);//循环输出a:1,b:2,etc.
}
},
timeout:3000
});
</script>
2、通过修改document.domain来跨子域
将子域和主域的document.domain设为同一个主域.前提条件:这两个域名必须属于同一个基础域名!而且所用的协议,端口都要一致,否则无法利用document.domain进行跨域。主域相同的使用document.domain
3、使用window.name来进行跨域
window.name = data;
//接着,子窗口跳回一个与主窗口同域的网址。
location = 'http://parent.url.com/xxx.html';
//然后,主窗口就可以读取子窗口的window.name了
var data = document.getElementById('iframe').contentWindow.name;
4、通过CORS解决AJAX跨域
function test() {
$.ajax({
url: api.testURI,
type: "get",
async: false,
data:{
"id":1
},
dataType:"json",
withCredentials:true,
success: function(data){
alert(data);
alert(data.code);
},
error: function(){
alert('fail');
}
})
}
5.服务器设置Access-Control-Allow-Origin实现跨域
app.all("*", function(req, res, next) {
const host = req.headers.origin;
res.header('Access-Control-Allow-Origin', host)
//res.header('Access-Control-Allow-Origin', *)
next();
});