跨域问题探究

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();
});

猜你喜欢