解决前端跨域问题方案汇总


Posted in Javascript onNovember 20, 2016

1.同源策略如下:

URL 说明 是否允许通信
http://www.a.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 https://www.a.com/b.js 同一域名,不同协议 不允许
http://www.a.com/a.js http://70.32.92.74/b.js 域名和域名对应ip 不允许
http://www.a.com/a.js http://script.a.com/b.js 主域相同,子域不同 不允许
http://www.a.com/a.js http://a.com/b.js 同一域名,不同二级域名(同上) 不允许(cookie这种情况下也不允许访问)
http://www.cnblogs.com/a.js http://www.a.com/b.js 不同域名 不允许

特别注意两点:

第一,如果是协议和端口造成的跨域问题“前台”是无能为力的,
第二:在跨域问题上,域仅仅是通过“URL的首部”来识别而不会去尝试判断相同的ip地址对应着两个域或两个域是否在同一个ip上。
“URL的首部”指window.location.protocol +window.location.host,也可以理解为“Domains, protocols and ports must match”。

2. 前端解决跨域问题

1> document.domain + iframe      (只有在主域相同的时候才能使用该方法)

1) 在www.a.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;
};

2) 在www.script.a.com/b.html中:

document.domain = 'a.com';

2> 动态创建script

这个没什么好说的,因为script标签不受同源策略的限制。

JavaScript

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

//我们请求的内容在哪里?
//我们可以在chorme调试面板的source中看到script引入的内容

3> location.hash + iframe

原理是利用location.hash来进行传值。

假设域名a.com下的文件cs1.html要和cnblogs.com域名下的cs2.html传递信息。
1) cs1.html首先创建自动创建一个隐藏的iframe,iframe的src指向cnblogs.com域名下的cs2.html页面
2) cs2.html响应请求后再将通过修改cs1.html的hash值来传递数据
3) 同时在cs1.html上加一个定时器,隔一段时间来判断location.hash的值有没有变化,一旦有变化则获取获取hash值
注:由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值,所以要借助于a.com域名下的一个代理iframe

代码如下:
先是a.com下的文件cs1.html文件:

function startRequest(){
  var ifr = document.createElement('iframe');
  ifr.style.display = 'none';
  ifr.src = 'http://www.cnblogs.com/lab/cscript/cs2.html#paramdo';
  document.body.appendChild(ifr);
}
 
function checkHash() {
  try {
    var data = location.hash ? location.hash.substring(1) : '';
    if (console.log) {
      console.log('Now the data is '+data);
    }
  } catch(e) {};
}
setInterval(checkHash, 2000);

cnblogs.com域名下的cs2.html:

//模拟一个简单的参数处理操作
switch(location.hash){
  case '#paramdo':
    callBack();
    break;
  case '#paramset':
    //do something……
    break;
}
 
function callBack(){
  try {
    parent.location.hash = 'somedata';
  } catch (e) {
    // ie、chrome的安全机制无法修改parent.location.hash,
    // 所以要利用一个中间的cnblogs域下的代理iframe
    var ifrproxy = document.createElement('iframe');
    ifrproxy.style.display = 'none';
    ifrproxy.src = 'http://a.com/test/cscript/cs3.html#somedata';  // 注意该文件在"a.com"域下
    document.body.appendChild(ifrproxy);
  }
}

a.com下的域名cs3.html

//因为parent.parent和自身属于同一个域,所以可以改变其location.hash的值
parent.parent.location.hash = self.location.hash.substring(1);

4> window.name + iframe

window.name 的美妙之处:name 值在不同的页面(甚至不同域名)加载后依旧存在,并且可以支持非常长的 name 值(2MB)。

1) 创建a.com/cs1.html

2) 创建a.com/proxy.html,并加入如下代码

<head>
 <script>
 function proxy(url, func){
  var isFirst = true,
    ifr = document.createElement('iframe'),
    loadFunc = function(){
     if(isFirst){
      ifr.contentWindow.location = 'http://a.com/cs1.html';
      isFirst = false;
     }else{
      func(ifr.contentWindow.name);
      ifr.contentWindow.close();
      document.body.removeChild(ifr);
      ifr.src = '';
      ifr = null;
     }
    };
 
  ifr.src = url;
  ifr.style.display = 'none';
  if(ifr.attachEvent) ifr.attachEvent('onload', loadFunc);
  else ifr.onload = loadFunc;
 
  document.body.appendChild(iframe);
 }
</script>
</head>
<body>
 <script>
  proxy('http://www.baidu.com/', function(data){
   console.log(data);
  });
 </script>
</body>

3) 在b.com/cs1.html中包含:

<script>
  window.name = '要传送的内容';
</script>

5> postMessage(HTML5中的XMLHttpRequest Level 2中的API)

1) a.com/index.html中的代码:

<iframe id="ifr" src="b.com/index.html"></iframe>
<script type="text/javascript">
window.onload = function() {
  var ifr = document.getElementById('ifr');
  var targetOrigin = 'http://b.com'; // 若写成'http://b.com/c/proxy.html'效果一样
                    // 若写成'http://c.com'就不会执行postMessage了
  ifr.contentWindow.postMessage('I was there!', targetOrigin);
};
</script>

2) b.com/index.html中的代码:

<script type="text/javascript">
  window.addEventListener('message', function(event){
    // 通过origin属性判断消息来源地址
    if (event.origin == 'http://a.com') {
      alert(event.data);  // 弹出"I was there!"
      alert(event.source); // 对a.com、index.html中window对象的引用
                 // 但由于同源策略,这里event.source不可以访问window对象
    }
  }, false);
</script>

6> CORS

CORS背后的思想,就是使用自定义的HTTP头部让浏览器与服务器进行沟通,从而决定请求或响应是应该成功,还是应该失败。

IE中对CORS的实现是xdr

var xdr = new XDomainRequest();
xdr.onload = function(){
  console.log(xdr.responseText);
}
xdr.open('get', 'http://www.baidu.com');
......
xdr.send(null);

其它浏览器中的实现就在xhr中

var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function () {
  if(xhr.readyState == 4){
    if(xhr.status >= 200 && xhr.status ){
      console.log(xhr.responseText);
    }
  }
}
xhr.open('get', 'http://www.baidu.com');
......
xhr.send(null);

实现跨浏览器的CORS

function createCORS(method, url){
  var xhr = new XMLHttpRequest();
  if('withCredentials' in xhr){
    xhr.open(method, url, true);
  }else if(typeof XDomainRequest != 'undefined'){
    var xhr = new XDomainRequest();
    xhr.open(method, url);
  }else{
    xhr = null;
  }
  return xhr;
}
var request = createCORS('get', 'http://www.baidu.com');
if(request){
  request.onload = function(){
    ......
  };
  request.send();
}

7> JSONP

JSONP包含两部分:回调函数和数据。

回调函数是当响应到来时要放在当前页面被调用的函数。

数据就是传入回调函数中的json数据,也就是回调函数的参数了。

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虽然很简单,但是有如下缺点:

1)安全问题(请求代码中可能存在安全隐患)

2)要确定jsonp请求是否失败并不容易

8> web sockets

web sockets是一种浏览器的API,它的目标是在一个单独的持久连接上提供全双工、双向通信。(同源策略对web sockets不适用)

web sockets原理:在JS创建了web socket之后,会有一个HTTP请求发送到浏览器以发起连接。取得服务器响应后,建立的连接会使用HTTP升级从HTTP协议交换为web sockt协议。

只有在支持web socket协议的服务器上才能正常工作。

var socket = new WebSockt('ws://www.baidu.com');//http->ws; https->wss
socket.send('hello WebSockt');
socket.onmessage = function(event){
  var data = event.data;
}
Javascript 相关文章推荐
Extjs学习笔记之六 面版
Jan 08 Javascript
jQuery拖动图片删除示例
May 10 Javascript
javascript:;与javascript:void(0)使用介绍
Jun 05 Javascript
jquery可见性过滤选择器使用示例
Jun 24 Javascript
Jquery判断$(&quot;#id&quot;)获取的对象是否存在的方法
Sep 25 Javascript
javascript实现客户端兼容各浏览器创建csv并下载的方法
Mar 23 Javascript
jQuery插件ajaxFileUpload使用详解
Jan 10 Javascript
ajax的分页查询示例(不刷新页面)
Jan 11 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
elementUI Tree 树形控件的官方使用文档
Apr 25 Javascript
微信小程序复选框实现多选一功能过程解析
Feb 14 Javascript
如何在vue中使用HTML 5 拖放API
Jan 14 Vue.js
jQuery 的 ready()的纯js替代方法
Nov 20 #Javascript
node+experss实现爬取电影天堂爬虫
Nov 20 #Javascript
JSP防止网页刷新重复提交数据的几种方法
Nov 19 #Javascript
bootstrap datetimepicker2.3.11时间插件使用
Nov 19 #Javascript
js 定位到某个锚点的方法
Nov 19 #Javascript
js 模仿锚点定位的实现方法
Nov 19 #Javascript
Javascript使用function创建类的两种方法(推荐)
Nov 19 #Javascript
You might like
php仿discuz分页效果代码
2008/10/02 PHP
php返回json数据函数实例
2014/10/09 PHP
php实现字符串反转输出的方法
2015/03/14 PHP
PHP实现获取文件后缀名的几种常用方法
2015/08/08 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
javascript中的=等号个数问题两个跟三个有什么区别
2013/10/23 Javascript
ext combobox动态加载数据库数据(附前后台)
2014/06/17 Javascript
JavaScript动态创建link标签到head里的方法
2014/12/22 Javascript
介绍一个简单的JavaScript类框架
2015/06/24 Javascript
javascript实现的全国省市县无刷新多级关联菜单效果代码
2016/08/01 Javascript
jQuery基本过滤选择器用法示例
2016/09/09 Javascript
原生JS实现瀑布流插件
2018/02/06 Javascript
Vue监听事件实现计数点击依次增加的方法
2018/09/26 Javascript
详解vue移动端项目代码拆分记录
2019/03/15 Javascript
bootstrap-table formatter 使用vue组件的方法
2019/05/09 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
js中比较两个对象是否相同的方法示例
2019/09/02 Javascript
javascript刷新父页面方法汇总详解
2019/10/10 Javascript
[07:59]2014DOTA2叨叨刀塔 林熊猫称被邀请赛现场盛况震撼
2014/07/21 DOTA
跟老齐学Python之重回函数
2014/10/10 Python
Python中操作文件之write()方法的使用教程
2015/05/25 Python
django解决跨域请求的问题详解
2019/01/20 Python
python3 深浅copy对比详解
2019/08/12 Python
如何在python中写hive脚本
2019/11/08 Python
django自定义模板标签过程解析
2019/12/14 Python
Python3 虚拟开发环境搭建过程(图文详解)
2020/01/06 Python
tensorflow使用L2 regularization正则化修正overfitting过拟合方式
2020/05/22 Python
pycharm使用技巧之自动调整代码格式总结
2020/11/04 Python
外贸实习生自荐信范文
2013/11/24 职场文书
汉语言文学职业规划
2014/02/14 职场文书
喝酒检查书范文
2014/02/23 职场文书
公司股权转让协议书
2014/04/12 职场文书
教研活动总结
2014/04/28 职场文书
12.4法制宣传日活动总结
2014/08/26 职场文书
2014年学校工会工作总结
2014/12/06 职场文书
办公室个人总结
2015/02/28 职场文书