what is 跨域?

Posted 2020-10-15 阿席巴i

1. 什么情况下会跨域

协议. 域名. 端口号 至少其中一个不相同, 在发生数据交互时, 即会产生跨域的现象.

2. 解决跨域时, 前端能做什么?

如果是协议. 端口不同, 那前端还是歇歇吧, 啥都干不了

• 修改domain [此方法仅适用于主域名相同的情况]

例: 如下a.b两个页面需进行数据交互

a: www.zhuyu.com

b: www.bbb.zhuyu.com

在www.zhuyu.com/a.html中:

document.domain = ‘a.com‘;
var ifr = document.createElement(‘iframe‘);
ifr.src = ‘http://www.script.a.com/b.html‘;
ifr.display = none;
document.body.appendChild(ifr);
ifr.onload = function(){
    var doc = ifr.contentDocument || ifr.contentWindow.document;
    //在这里操作doc，也就是b.html
    ifr.onload = null;
};

在www.script.a.com/b.html中：

document.domain = ‘a.com‘;

• 动态创建script

  src属性不受同源策略的限制
  ```
  function loadScript(url, func) {
  var head = document.head || document.getElementByTagName(‘head‘)[0];
  var script = document.createElement(‘script‘);
  script.src = url;

script.onload = script.onreadystatechange = function(){
if(!this.readyState || this.readyState==‘loaded‘ || this.readyState==‘complete‘){
func();
script.onload = script.onreadystatechange = null;
}
};

head.insertBefore(script, 0);
}
window.baidu = {
sug: function(data){
console.log(data);
}
}
loadScript(‘http://suggestion.baidu.com/su?wd=w‘,function(){console.log(‘loaded‘)});

- JSONP [ 只能处理get请求,不支持POST请求(局限性) ]

function handleResponse(response){
console.log(‘The responsed data is: ‘+response.data);
}
var script = document.createElement(‘script‘);
script.src = ‘http://www.baidu.com/json/?callback=handleResponse‘;
document.body.insertBefore(script, document.body.firstChild);
/handleResonse({"data": "zhe"})/
//原理如下：
//当我们通过script标签请求时
//后台就会根据相应的参数(json,handleResponse)
//来生成相应的json数据(handleResponse({"data": "zhe"}))
//最后这个返回的json数据(代码)就会被放在当前js文件中被执行
//至此跨域通信完成
//仅仅是客户端使用jsonp请求数据是不行的，因为jsonp的请求是放在script标签中的，和普通请求不同的地方在于，它请求到的是一段js代码，如果服务端返回了json字符串，那么浏览器是会报错的。所以jsonp返回数据需要服务端做一些处理。
```

以上选自: http://blog.csdn.net/joyhen/article/details/21631833