必赢的网址登录:js跨域

作者:计算机知识

 第3回写博客,好紧张,不领会能写成啥样,哈哈哈。

js跨域,js跨

 第三遍写博客,好紧张,不亮堂能写成啥样,哈哈哈。

友善的一知片解,有错请多多指教,嘻嘻嘻。

一、何为跨域?

万1协议、域名、端口后其余二个见仁见智,正是跨域。

举个例证:

磋商分裂

域名不一样

端口差异

 

 

 

 

 

 

只顾:ip一样,域名不相同,也是跨域。(在本地写demo时,配置host文件,12七.0.0.一布置了三个域名,纠结是不是算跨域,试了弹指间,是的)

贰、跨域的项目

1.cookie

唯有同源的网页才具共享cookie

2.iframe

网格网页差异源,不能够得到对方的DOM

3.ajax

只可以请求同源的网站,不然报错

三、化解跨域

自己在自个儿Computer的host文件里安排了四个域有名的模特拟跨域。

必赢的网址登录 1

以下,test1代表www.test1.myhost.com; test2代表www.test2.myhost.com

1.cookie

存在那样壹种情况能够落实共享cookie:四个网页一流域名形同,二级域名差异,设置cookie时,钦点多少个网页的domain同样,便能够共享cookie啦。

test1:

document.cookie = 'key1= value1; domain=myhost.com';
console.log(document.cookie);//"key1 = value1"

test2:

console.log(document.cookie);//"key1 = value1"

就酱紫,他俩共享cookie了,好可怕

打开application看看,发现这cookie原来在myhost.com域名下。

必赢的网址登录 2

2.iframe

2个页面中嵌套两个iframe,那么些iframe的src与主页面跨域。那样的话,主页面获取操作iframe的DOM,iframe也惊惶失措操作主页面的DOM

test1为主页面,test二为停放的iframe

缓和iframe跨域的,婴儿只晓得那两种:

(一)片段识别符

(2)window.name

(3)window.postMessage

2.一 片段识别符

指的是URL中#背后的有的,只改换部分识别符,页面不会另行刷新。

兑现思路:

父窗口能够把要传递的数目写入iframe的src片段识别符中,iframe通过监听hashchange事件得到照拂,获取数据

同等道理,子窗口也足以转移父窗口的1部分识别符,达到一样的作用。示例来咯:

父→子:

必赢的网址登录:js跨域。主页面

var origin  = $('iframe').attr('src');
$('iframe').attr('src', origin   '#主窗口');

iframe

console.log(window.location.hash);//"#主窗口"

子→父:

iframe

parent.location.href ='http://www.test1.myhost.com:8080/tutor/cookie#iframe'

主页面

console.log(window.location.hash);//"#iframe"

2.2 window.name

浏览器窗口有window.name属性,它的特色是随意是或不是同源,只要在同3个窗口中,前三个网页设置了这脾本性,后2个网页就能够读取它

落到实处思路:

将iframe需求与主页面传递的数据写到iframe的window.name中,实现后将iframe的src设置成与主页面同源,此时,主页面与iframe就同源了,就足以获得对方的数码啦,而iframe的src改变并不影响window.name的值啊,主页面便能够轻便读取iframe中window.name的值啦,是还是不是很聪明伶俐!再来个例子吗。

iframe

window.name = '哈哈哈,我是iframe';
location.href = 'http://www.test1.myhost.com:8080/这里就是一个与主页面同源的页面';

主页面

console.log($('iframe')[0].contentWindow.name);//"哈哈哈,我是iframe"

2.3 window.postMessage

html伍引进的新API,允许跨窗口通讯,不论那多个窗口是还是不是同源。

window.postMessage(data, url); //data为要传给指标的数据,url为对象的url。

留神,此window是目的窗口的window,不是本窗口的window

墨守成规来个例证:

子→父:

iframe

top.postMessage('hello', 'http://www.test1.myhost.com:8080/tutor/cookie');

主页面

window.addEventListener('message', function(e) {
  console.log(e.data);//"hello"
}, false);

父→子:

主页面

$('.post').on('click', function() {
   $('iframe')[0].contentWindow.postMessage('hello hello', 'http://www.test2.myhost.com:8080/这里就是一个目标url');
});

iframe

window.addEventListener('message', function(e) {
  console.log(e.data);//"hello hello"
}, false);

这里的e有多少个根脾性质:

a.data:传递来的message

b.source:发送音信的窗口对象

c.origin:发送新闻窗口的源(协议 主机 端口号)

3.ajax

诶嘿,婴儿掌握的也是三种,哈哈哈,好巧啊

(1)JSONP

(2)websocket

(3)CORS

个别说说呢

3.1 JSONP

规律正是采用script脚本具备跨域手艺。

骨干思维是,网页增多2个script成分,src放需求请求的接口,这种做法不受同源战略的限制。服务器收到请求后,将数据放在一个点名的回调函数里传回到。

这种情势大致适用,老式的浏览器全体帮衬,服务器改换也非常小。

js实现:

function addScriptTag(src) {
  var script = document.createElement('script');
  script.setAttribute("type","text/javascript");
  script.src = src;
  document.body.appendChild(script);
}

$('.ajax').on('click', function() {
  addScriptTag('http://www.php.myhost.com/jsonp.php?callback=foo');
});

function foo(data) {
  console.log('response data is: '   data);
};

jQuery实现:

$('.ajax').on('click', function() {
  $.ajax({
    url: 'http://www.php.myhost.com/jsonp.php',
    type: 'get',
    dataType: 'jsonp',
    jsonpCallback: 'foo',
    data: {}
  });
});

function foo(data) {
  console.log('Your response is: '   data);
};

PHP代码:

<?php

$callback = $_GET['callback'];
$data = 'hello';
echo $callback.'('.json_encode($data).')';

?>

3.2 websocket

websocket是壹种通讯协议。该协议不实践同源计谋,只要服务器扶助,就足以通过它进行跨源通讯。

比如,长连接呀

实际上不太懂,就先不说它了哈

3.3 CORS

伊始扯啦

CO库罗德S是跨源能源分享(Cross-Origin Resource Sharing)的缩写。它是W3C规范,是跨源AJAX请求的有史以来消除措施。

CO奇骏S请求分为两类:轻巧请求和非简单请求,太多了,这里就先不介绍了,壹查就领悟了。

轻便易行请求正是浏览器发出CO帕杰罗S请求时,http头个中扩展2个域(origin)的新闻。该域包括协议名、地址及三个可选的端口,用来表达这一次请求来自哪个源,服务器依照这几个值决定是或不是同意这一次请求。(那都以浏览器代为发送,开辟者的代码不能触及到)

假使那些钦点的源不在许可限制内,服务器就回到一个健康的http回应。但是回应中从未Access-Control-Allow-Origin字段,抛出特别,XMLHttpRequest的onerror捕获。

万一那个钦定的源在许可范围内,会多出多少个头音讯字段(都是Access-Contrl-初阶)

非轻易请求(小编平日请求的接口都以非轻松请求,因为content-type为application/json)是在倡导正式通讯此前增添一回http查询,实现询问服务器当前网页所在域名是或不是在许可名单中,得到一定答应后浏览器才会产生正式的XMLHttpRequest请求,不然报错。

预检请求的艺术是options,头消息里面首要字段是origin,表示来自哪个源。服务器收到预检请求后检查origin,确认是不是允许跨源请求,就能够做出回应了。

允许请求:在http回应中,关键是Access-Control-Allow-Origin字段,如:Access-Control-Allow-Origin:

不容许请求:会回去贰个正常的http回应,但从没其余CO索罗德S相关的头音信字段,浏览器会觉得不允许预检请求,触发一个不当,被XMLHttpRequest的onerror捕获。

总来讲之,普通跨域请求,只要服务端设置Access-Control-Allow-Origin就可以,前端无须设置。带cookie请求,需求前后端都设置字段。注意,所带cookie为跨域请求接口所在域的cookie,而非当前页的。

查了一下前端带cookie请求咋落到实处:

js

 var xhr = new XMLHttpRequest(); // 前端设置是否带cookie 
 xhr.withCredentials = true;

jquery

  $.ajax({
    xhrFields: {        
      withCredentials: true // 前端设置是否带cookie    
    },
  });

vue:

vue框架在vue-resource封装的ajax组件中加入以下代码:
Vue.http.options.credentials = true

ok ,总算写完啦~~~

啊,对了,加一下ajax跨域的三种情景(那二种现象那个博客说的很好:

第一遍写博客,好紧张,不领悟能写成啥样,哈哈哈。 本身的一知片解,有错请多多指教,嘻嘻嘻。 壹、何为跨域? 只要 协...

jsonp

原理:
JSONP 利用 <script>成分的那些开放政策,网页能够取得从其余来源动态发生的JSON数据,而这种利用格局就是所谓的 JSONP。用JSONP抓到的数据并不是JSON,而是任意的JavaScript,用 JavaScript解释器运维而不是用JSON深入分析器深入分析。

<script type="text/javascript">   
    var localHandler = function(data){
    alert('我是本地函数,可以被跨域的remote.js文件调用,远程js带来的数据是:'   data.result);    };    
</script>   
<script type="text/javascript" src="http://www.crhled.com/uploads/allimg/190530/052G36216-2.jpg"></script>

远程的remote.js

localHandler({"result":"我是远程js带来的数据"});

自己本地请求

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script type="text/javascript">
    // 得到航班信息查询结果后的回调函数
    var flightHandler = function(data){
        alert('你查询的航班结果是:票价 '   data.price   ' 元,'   '余票 '   data.tickets   ' 张。');
    };
    // 提供jsonp服务的url地址(不管是什么类型的地址,最终生成的返回值都是一段javascript代码)
    var url = "http://flightQuery.com/jsonp/flightResult.aspx?code=CA1998&callback=flightHandler";
    // 创建script标签,设置其属性
    var script = document.createElement('script');
    script.setAttribute('src', url);
    // 把script标签加入head,此时调用开始
    document.getElementsByTagName('head')[0].appendChild(script); 
    </script>
</head>
<body>

</body>
</html>

请求flightResult.aspx获取的数据

flightHandler({
    "code": "CA1998",
    "price": 1780,
    "tickets": 5
});

调用的url中传递了八个code参数,告诉服务器本人要查的是CA一9九七次航班的新闻,而callback参数则告诉服务器,小编的地面回调函数叫做flightHandler,所以请把询问结果传到那几个函数中进行调用。

劣势: 协助get 安全性不高 (能够通过动态生成jsonp化解)

与ajax的区别
但ajax和jsonp其实本质上是例外的东西。ajax的主旨是经过XmlHttpRequest获取非本页内容,而jsonp的中坚则是动态增加<script>标签来调用服务器提供的js脚本。

和煦的一知片解,有错请多多指教,嘻嘻嘻。

cors

一、何为跨域?

document.domain iframe(适用于主域名同样的情景)

在域名叫http://server.example.com中的a.html

document.domain = 'example.com';
var $iframe = document.createElement('iframe');
$iframe.src = 'server.child.example.com/b.html';
$iframe.style.display = 'none';
document.body.appendChild($iframe);
$iframe.onload = function(){
    var doc = $iframe.contentDocument || $iframe.contentWindow.document;
    //在这里操作doc,也就是操作b.html
    $iframe.onload = null;
};

在域名称为http://server.child.example.com中的b.html

document.domain = 'example.com'

这种情势方便归方便,但也许有其方便带来的隐患

  • 安全性,当二个站点被攻击后,另二个站点会挑起安全漏洞。

  • 若页面中引进多个iframe,要想操作全体iframe,domain供给全部设置成同样的。

要是协议、域名、端口后其它2个不等,就是跨域。

HTML5中的postMessage

postMessage隶属于html5,然则它协理IE八 和其余浏览器,能够达成同域传递,也能完成跨域传递。它归纳殡葬音讯postMessage和抽裁撤息message成效。

postMessage调用语法如下

otherWindow.postMessage(message, targetOrigin, [transfer]);

  • otherWindow : 其余窗口的叁个引用,比方iframe的contentWindow属性、实施window.open再次来到的窗口对象、或然是命名过或数值索引的window.frames。
  • message : 就要发送到别的 window的数量,类型为string大概object。
  • targetOrigin : 通过窗口的origin属性来钦点哪些窗口能收到到新闻事件,其值能够是字符串"*"(表示无界定)也许二个U奥德赛I。
  • transfer (可选) : 壹串和message 同期传递的 Transferable 对象。

收到音讯message 的习性有:

  • data :从任何 window 中传送过来的数目。
  • origin :调用 postMessage 时消息发送方窗口的 origin 。
  • source :对出殡和埋葬音讯的窗口对象的引用。

示范如下:域名

页面A发送新闻代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面A</title>
</head>
<body>
    <h1>hello jsonp</h1>
    <iframe src="http://127.0.0.1/b.html" id="iframe"></iframe>
</body>
</html>
<script>
window.onload = function() {  
    var $iframe = document.getElementById('iframe');  
    var targetOrigin = "http://127.0.0.1";  
    $iframe.contentWindow.postMessage('postMessage发送消息', targetOrigin);  
}; 
</script>

页面B接收音讯代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>页面B</title>
</head>
<body>
    <h1>hello jsonp</h1>
</body>
</html>
<script>
var onmessage = function (event) {
  var data = event.data;    //消息
  var origin = event.origin; //消息来源地址
  var source = event.source; //源Window对象
  if(origin === "http://127.0.0.1:9000"){
    console.log(data, origin, source);
  }
};
// 事件兼容简单处理
if (window.addEventListener) {
  window.addEventListener('message', onmessage, false);
}
else if (window.attachEvent) {
  window.attachEvent('onmessage', onmessage);
}
else {
  window.onmessage = onmessage;
}
</script>

运作结果如下

必赢的网址登录 3

举个例证:

情商不相同

域名分歧

端口区别

 

 

 

 

 

 

注意:ip一样,域名不一致,也是跨域。(在该地写demo时,配置host文件,1二七.0.0.壹配备了五个域名,纠结是还是不是算跨域,试了一下,是的)

二、跨域的品类

1.cookie

除非同源的网页工夫共享cookie

2.iframe

网格网页不一致源,不能获得对方的DOM

3.ajax

只可以请求同源的网站,不然报错

三、化解跨域

自己在自家计算机的host文件里布署了三个域有名的模特拟跨域。

必赢的网址登录 4

以下,test1代表www.test1.myhost.com; test2代表www.test2.myhost.com

1.cookie

留存这么一种情状能够完成共享cookie:三个网页一级域名形同,二级域名不一样,设置cookie时,钦赐四个网页的domain一样,便足以共享cookie啦。

test1:

document.cookie = 'key1= value1; domain=myhost.com';
console.log(document.cookie);//"key1 = value1"

test2:

console.log(document.cookie);//"key1 = value1"

就酱紫,他俩共享cookie了,好吓人

打开application看看,发现这cookie原来在myhost.com域名下。

必赢的网址登录 5

2.iframe

1个页面中嵌套二个iframe,那些iframe的src与主页面跨域。那样的话,主页面获取操作iframe的DOM,iframe也不知所厝操作主页面包车型地铁DOM

test1为主页面,test二为停放的iframe

本文由bwin必赢发布,转载请注明来源

关键词: js 前端开发