what is 跨域?

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

后端能做什么

  • 后台response添加header，response.setHeader("Access-Control-Allow-Origin", "*");

"Access-Control-Allow-Origin", "*" 表示所有网站都可以访问

或者可以指定某个具体域名访问response.setHeader("Access-Control-Allow-Origin", "http://baidu.com");

代码实例如下：(也可以在拦截器中设置response.setHeader("Access-Control-Allow-Origin", "http://baidu.com"))

// java: 
@Controller  
public static class TestAjaxController {  
    @RequestMapping(value = "/test")  
    @ResponseBody  
    public String getLoactionInfo(String userId, HttpServletResponse response)  
            throws Exception {  
        response.setHeader("Access-Control-Allow-Origin", "*");  
        //.......  
        return ".....";  
    }  
}

以上摘自: http://blog.csdn.net/qq_32786873/article/details/52170103

posted @ 2017-08-08 20:35  阿席巴i  阅读(168)  评论(0)    收藏  举报