题目1.什么是同源策略?
同源策略(Same origin Policy): 浏览器出于安全方面的考虑，只允许与本域下的接口交互。不同源的客户端脚本在没有明确授权的情况下，不能读写对方的资源。
本域指的是:
- 同协议：如都是http或者https
- 同域名：如都是http://haha.com/a 和http://haha.com/b
- 同端口：如都是80端口(没有指定端口默认为80)
不同源案例:
http://zhihu.com 和 https://zhihu.com
(协议不同)http://zhihu.com和 http://zhihu.com.cn
(域名不同，域名必须完全相同才可以)http://zhihu.com 和 http://zhihu.com:8080
(端口不同,第一个是80)
总结:如果想是同源,必须保证同协议同域名同端口,有一个不同,浏览器都认为是不同源
题目2.什么是跨域？跨域有几种实现形式?
浏览器的同源策略会导致跨域，这里同源策略又分为以下两种：
1.DOM同源策略:禁止对不同源页面DOM进行操作。这里主要场景是iframe跨域的情况，不同域名的iframe是限制互相访问的。
2.XMLHttpRequest同源策略：禁止使用XHR对象向不同源的服务器地址发起HTTP请求。
跨域的严格一点的定义是：只要协议、域名、端口有任何一个的不同，就被当作是跨域。
2.跨域实现形式:7种
- 常用的七种跨域的方式，关于跨域大概可以分为 iframe 的跨域和纯粹的跨全域请求。其中:JSONP CORS Server Proxy (服务器代理)为跨全域方式,剩下4种是通过iframe跨域与其他页面通信的方式.
1.JSONP
2.CORS
3.Server Proxy (服务器代理)
4.document.domain(降域)
5.postMessage
6.location.hash
7.window.name
- 常用的七种跨域的方式，关于跨域大概可以分为 iframe 的跨域和纯粹的跨全域请求。其中:JSONP CORS Server Proxy (服务器代理)为跨全域方式,剩下4种是通过iframe跨域与其他页面通信的方式.
题目3.： JSONP 的原理是什么?
JSONP(JSON with padding)
利用<script>标签没有跨域限制的“漏洞”来达到与第三方通讯的目的。
JSONP是通过 <script> 标签加载数据的方式去获取数据当做 JS 代码来执行 提前在页面上声明一个函数，函数名通过接口传参的方式传给后台，后台解析到函数名后在原始数据上「包裹」这个函数名，发送给前端。换句话说，JSONP 需要对应接口的后端的配合才能实现。
题目4： CORS是什么?
- CORS 全称是跨域资源共享（Cross-Origin Resource Sharing），是一种 ajax 跨域请求资源的方式，支持现代浏览器，IE支持10以上。 实现方式很简单，当你使用 XMLHttpRequest 发送请求时，浏览器发现该请求不符合同源策略，会给该请求加一个请求头：Origin，后台进行一系列处理，如果确定接受请求则在返回结果中加入一个响应头：
Access-Control-Allow-Origin; 浏览器判断该相应头中是否包含 Origin 的值，如果有则浏览器会处理响应，我们就可以拿到响应数据，如果不包含浏览器直接驳回，这时我们无法拿到响应数据。所以 CORS 的表象是让你觉得它与同源的 ajax 请求没啥区别，代码完全一样。 - 整个CORS通信过程，都是浏览器自动完成，不需要用户参与。对于开发者来说，CORS通信与同源的AJAX通信没有差别，代码完全一样。浏览器一旦发现AJAX请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。
实现CORS通信的关键是服务器。只要服务器实现了CORS接口，就可以跨源通信。
浏览器将CORS请求分为两类：简单请求和非简单请求
简单请求：
- 请求方法是以下三种方法之一：
- HEAD
- GET
- POST
- HTTP的头信息不超出以下几种字段：
- Accept
- Accept-Language
- Content-Language
- Last-Event-ID
- Content-Type：只限于三个值application/x-www-form-urlencoded、
multipart/form-data、text/plain
对于简单请求，浏览器直接发出CORS请求，具体来说，就是在头信息之中，增加一个Origin字段。
示例：1
2
3
4
5
6GET /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
上面的头信息中，Origin字段用来说明本次请求来自哪个源（协议+域名+端口），服务器根据这个值决定是否同意这次请求。
如果Origin指定的源，不在许可范围内，服务器会返回一个正常的HTTP回应。浏览器发现，这个回应的头信息没有包含Access-Control-Allow-Origin字段，就知道出错了，从而抛出一个错误，被XMLHttpRequest的onerror回调函数捕获。注意，这种错误无法通过状态码识别，因为HTTP回应的状态码有可能是200。
如果Origin指定的域名在许可范围内，服务器返回的响应，会多出几个头信息字段。1
2
3
4Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Credentials: true
Access-Control-Expose-Headers: FooBar
Content-Type: text/html; charset=utf-8
上面的头信息之中，有三个与CORS请求相关的字段，都以Access-Control-开头
（1）Access-Control-Allow-Origin
该字段是必须的。它的值要么是请求时Origin字段的值，要么是一个*，表示接受任意域名的请求。
（2）Access-Control-Allow-Credentials
该字段可选。它的值是一个布尔值，表示是否允许发送Cookie。默认情况下，Cookie不包括在CORS请求之中。设为true，即表示服务器明确许可，Cookie可以包含在请求中，一起发给服务器。这个值也只能设为true，如果服务器不要浏览器发送Cookie，删除该字段即可。
（3）Access-Control-Expose-Headers
该字段可选。CORS请求时，XMLHttpRequest对象的getResponseHeader()方法只能拿到6个基本字段：Cache-Control、Content-Language、Content-Type、Expires、Last-Modified、Pragma。如果想拿到其他字段，就必须在Access-Control-Expose-Headers里面指定。上面的例子指定，getResponseHeader(‘FooBar’)可以返回FooBar字段的值。
非简单请求
凡是不同时满足简单请求的两大条件的请求就属于非简单请求
非简单请求指对服务器有特殊要求的请求，比如请求方法是PUT或DELETE，或者Content-Type字段的类型是application/json。
非简单请求的CORS请求，会在正式通信之前，增加一次HTTP查询请求，称为”预检”请求（preflight）。
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。
下面是一段浏览器的JavaScript脚本1
2
3
4
5var url = 'http://api.alice.com/cors';
var xhr = new XMLHttpRequest();
xhr.open('PUT', url, true);
xhr.setRequestHeader('X-Custom-Header', 'value');
xhr.send();
上面代码中，HTTP请求的方法是PUT，并且发送一个自定义头信息X-Custom-Header。
浏览器发现，这是一个非简单请求，就自动发出一个”预检”请求，要求服务器确认可以这样请求。下面是这个”预检”请求的HTTP头信息。1
2
3
4
5
6
7
8OPTIONS /cors HTTP/1.1
Origin: http://api.bob.com
Access-Control-Request-Method: PUT
Access-Control-Request-Headers: X-Custom-Header
Host: api.alice.com
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
“预检”请求用的请求方法是OPTIONS，表示这个请求是用来询问的。头信息里面，关键字段是Origin，表示请求来自哪个源。除了Origin字段，”预检”请求的头信息包括两个特殊字段。
（1）Access-Control-Request-Method
该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。
（2）Access-Control-Request-Headers
该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header。
服务器收到”预检”请求以后，检查了Origin、Access-Control-Request-Method和Access-Control-Request-Headers字段以后，确认允许跨源请求，就可以做出回应。1
2
3
4
5
6
7
8
9
10
11
12HTTP/1.1 200 OK
Date: Mon, 01 Dec 2008 01:15:39 GMT
Server: Apache/2.0.61 (Unix)
Access-Control-Allow-Origin: http://api.bob.com
Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Content-Type: text/html; charset=utf-8
Content-Encoding: gzip
Content-Length: 0
Keep-Alive: timeout=2, max=100
Connection: Keep-Alive
Content-Type: text/plain
上面的HTTP回应中，关键的是Access-Control-Allow-Origin字段，表示http://api.bob.com可以请求数据。(该字段也可以设为星号，表示同意任意跨源请求——Access-Control-Allow-Origin: *)
如果浏览器否定了”预检”请求，会返回一个正常的HTTP回应，但是没有任何CORS相关的头信息字段。这时，浏览器就会认定，服务器不同意预检请求，因此触发一个错误，被XMLHttpRequest对象的onerror回调函数捕获。控制台会打印出如下的报错信息。1
2XMLHttpRequest cannot load http://api.alice.com.
Origin http://api.bob.com is not allowed by Access-Control-Allow-Origin.
服务器回应的其他CORS相关字段如下。1
2
3
4Access-Control-Allow-Methods: GET, POST, PUT
Access-Control-Allow-Headers: X-Custom-Header
Access-Control-Allow-Credentials: true
Access-Control-Max-Age: 1728000
（1）Access-Control-Allow-Methods
该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次”预检”请求。
（2）Access-Control-Allow-Headers
如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在”预检”中请求的字段。
（3）Access-Control-Allow-Credentials
该字段与简单请求时的含义相同。
（4）Access-Control-Max-Age
该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。
一旦服务器通过了”预检”请求，以后每次浏览器正常的CORS请求，就都跟简单请求一样，会有一个Origin头信息字段。服务器的回应，也都会有一个Access-Control-Allow-Origin头信息字段。
下面是”预检”请求之后，浏览器的正常CORS请求。1
2
3
4
5
6
7PUT /cors HTTP/1.1
Origin: http://api.bob.com
Host: api.alice.com
X-Custom-Header: value
Accept-Language: en-US
Connection: keep-alive
User-Agent: Mozilla/5.0...
上面头信息的Origin字段是浏览器自动添加的。下面是服务器正常的回应。1
2Access-Control-Allow-Origin: http://api.bob.com
Content-Type: text/html; charset=utf-8
上面头信息中，Access-Control-Allow-Origin字段是每次回应都必定包含的。
参考阮一峰: 跨域资源共享CORS 详解
题目5:演示以上跨域的解决方式
1.JSONP实现跨域
Web 页面上调用 js 文件不受浏览器同源策略的影响，所以通过 Script 便签可以进行跨域的请求：
1.首先前端先设置好回调函数，并将其作为 url 的参数。
2.服务端接收到请求后，通过该参数获得回调函数名，并将数据放在参数中将其返回
3.收到结果后因为是 script 标签，所以浏览器会当做是脚本进行运行，从而达到跨域获取数据的目的。
实例演示:
后端逻辑:文件名server.js1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16//后端逻辑
var url = require('url')
var http = require('http')
http.createServer(function (req, res) {
var data = {
name: "haha"
};
var callback = url.parse(req.url,true).query.callback;
//url.parse(req.url,true).query即{callback:jsonpCallback} ----------------获取函数名callback
res.writeHead(200)
res.end(`${callback}(${JSON.stringify(data)})`)
}).listen(3000, '127.0.0.1')
//服务端接收到请求后获取到回调函数名callback,将数据放在参数中将其返回,即返回callback({"name" : "haha"}) 函数调用
console.log('监听127.0.0.1:3000端口') //注意这里文字一定要引号包裹不然会报错
//注意终端提示：SyntaxError: Invalid or unexpected token 无效或意外的标记，出现这种情况一般是中文的标点符号或者漏写了符号导致的
前端页面:文件名index.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17<!--前端页面-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>JSONP实现跨域</title>
</head>
<body>
<script>
function jsonpCallback(data) {
console.log(JSON.stringfy(data))
} //定义回调函数jsonpCallback,收到服务端返回结果callback({"name" : "haha"}),callback=jsonpCallback
</script>
<script src="http://127.0.0.1:3000?callback=jsonpCallback"></script> //web页面上调用js文件不收同源策略影响
</body>
</html>
验证过程:
- 终端在后端文件
server.js目录下，node server.js启动服务,监听端口3000
- 我们通过端口号的不同来模拟跨域的场景，通过127.0.0.1:8080端口来访问页面.
这里我们打开另一个终端,在页面同目录下输入http-server启动端口
这样就可以通过端口 8080 访问 index.html 刚才那个页面了，相当于是开启两个监听不同端口的 http 服务器，通过页面中的请求来模拟跨域的场景。打开浏览器，访问 http://127.0.0.1:8080就可以看到从http://127.0.0.1:3000获取到的数据了。
至此，通过 JSONP 跨域获取数据已经成功了，但是通过这种事方式也存在着一定的优缺点：
优点：
1.它不像XMLHttpRequest 对象实现 Ajax 请求那样受到同源策略的限制
2.兼容性很好，在古老的浏览器也能很好的运行
3.不需要 XMLHttpRequest 或 ActiveX 的支持；并且在请求完毕后可以通过调用 callback 的方式回传结果。
缺点：
1.它支持 GET 请求而不支持 POST 等其它类型的 HTTP 请求。
2.它只支持跨域 HTTP 请求这种情况，不能解决不同域的两个页面或 iframe 之间进行数据通信的问题
3.容易遭受XSS攻击，因为我们拿到的是对方接口的数据作为js执行，如果得到的是一个很危险js，获取了用户信息和cookies，这时执行了js就会出现安全问题。
2.CORS实现跨域
CORS 是一个 W3C 标准，全称是”跨域资源共享”（Cross-origin resource sharing）它允许浏览器向跨源服务器，发出 XMLHttpRequest 请求，从而克服了 ajax 只能同源使用的限制。
CORS 需要浏览器和服务器同时支持才可以生效，对于开发者来说，CORS 通信与同源的 ajax 通信没有差别，代码完全一样。浏览器一旦发现 ajax 请求跨源，就会自动添加一些附加的头信息，有时还会多出一次附加的请求，但用户不会有感觉。参考阮一峰http://www.ruanyifeng.com/blog/2016/04/cors.html
因此，实现 CORS 通信的关键是服务器。只要服务器实现了 CORS 接口，就可以跨源通信。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18<!--前端页面-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script>
var xhr = new XMLHttpRequest()
xhr.open('GET', 'http://127.0.0.1:3000', true)
xhr.send()
xhr.onload = function () {
console.log(xhr.responseText)
}
</script>
</body>
</html>
这似乎跟一次正常的异步 ajax 请求没有什么区别，关键是在服务端收到请求后的处理：1
2
3
4
5
6
7
8var http = require('http')
http.createServer(function(req,res){
res.writeHead(200,{
'Acess-Control-Allow-Origin':'http://127.0.0.1:8080'
})
res.end('这是你要的数据: haha')
}).listen(3000,'127.0.0.1')
console.log('监听127.0.0.1:3000端口')
关键是在于设置相应头中的 Access-Control-Allow-Origin，该值要与请求头中 Origin 一致才能生效，否则将跨域失败。
开启两个http服务器
打开浏览器访问localhost:8080,
成功的关键在于 Access-Control-Allow-Origin是否包含请求页面的域名，如果不包含的话，浏览器认为是跨域请求,会拦截返回的信息.
另外如果服务器设置:1
2
3res.writeHead(200,{
'Acess-Control-Allow-Origin': * //开放接口,任何人都能跨域调用该接口内的数据
})
CORS 的优缺点：
CORS 的优点：
1.使用简单方便，更为安全
2.支持 POST 请求方式
3.精确控制资源访问权限
4.客户端无需增加额外代码
缺点：- CORS仅兼容 IE 10 以上
3.Server Proxy服务器代理
需要跨域的请求操作时发送请求给后端，让后端帮你代为请求，然后将获取的结果发送给你。
假设你的页面需要获取 CNode：Node.js专业中文社区 论坛上一些数据，如通过 https://cnodejs.org/api/v1/topics，因为不同域，所以你可以请求后端让其代为转发请求.1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22var url = require('url');
var http = require('http');
var https = require('https');
var server = http.createServer((req, res) => { // =>前面是参数,后面是函数体
var path = url.parse(req.url).path.slice(1);
if(path === 'topics'){
https.get('https://cnodejs.org/api/v1/topics',(resp) => {
var data = "";
resp.on('data',chunk => {
data += chunk;
})
resp.on('end', () => {
res.writeHead(200, {
'Content-Type': 'application/json; charset=utf-8'
});
res.end(data);
})
})
}
}).listen(3000,'127.0.0.1');
console.log('启动服务，监听 127.0.0.1:3000');
开启服务器:
打开浏览器访问http://localhost:3000/topics就可以看到:
获取到数据,跨域成功
四种iframe跨域
1.postMessage实现跨域
postMessage 是 HTML5 新增加的一项功能，跨文档消息传输(Cross Document Messaging)，目前：Chrome 2.0+、Internet Explorer 8.0+, Firefox 3.0+, Opera 9.6+, 和 Safari 4.0+ 都支持这项功能，使用起来也特别简单。
首先创建 a.html 文件：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a.html</title>
</head>
<body>
<iframe src="http://localhost:8081/b.html" style='display: none;'></iframe>
<script>
window.onload = function(){
var targetOrigin = 'http://localhost:8081';
window.frames[0].postMessage('看到我发给你的信息没',targetOrigin) //window.frames[0]是内嵌的窗口
}
window.addEventListener('message',function(e){
console.log('a.html接收到信息:',e.data)
});
</script>
</body>
</html>
创建内嵌b.html1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>b.html</title>
</head>
<body>
<script>
window.addEventListener('message',function(e){
if(e.source != window.parent){
return;
}
var data = e.data;
console.log('b.html 接收到的消息:', data);
parent.postMessage('我看到你发的消息了!',e.origin)
})
</script>
</body>
</html>
然后同时开启服务器:注意b.html服务器开启更改接口命令:http-server -p 8081
在浏览器中打开http://127.0.0.1:8080/a.html
跨域成功.
参考教程:Window.postMessage()
2.document.domain实现跨域:(降域)
对于主域相同而子域不同的情况下，可以通过设置 document.domain 的办法来解决，具体做法是可以在 http://www.example.com/a.html和http://sub.example.com/b.html两个文件分别加上 document.domain = “a.com”；然后通过 a.html 文件创建一个 iframe，去控制 iframe 的 window，从而进行交互，当然这种方法只能解决主域相同而二级域名不同的情况
测试的方式稍微复杂点，需要安装 nginx 做域名映射，如果你电脑没有安装 nginx，请先去安装一下: nginx news
安装教程:https://www.cnblogs.com/chuncn/archive/2011/10/14/2212291.html
先创建一个 a.html 文件：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a.html</title>
</head>
<body>
<script>
document.domain = 'example.com' //a,b分别加上 document.domain = "example.com"
var ifr = document.createElement('iframe'); //创建一个iframe 内嵌窗
ifr.src = 'http://sub.example.com/b.html';
ifr.style.display = 'none';
document.body.append(ifr)
ifr.onload = function(){
var win = ifr.contentWindow; //控制内嵌iframe的窗口信息
alert(win.data)
}
</script>
</body>
</html>
创建b.html文件1
2
3
4
5
6
7
8
9
10
11
12
13<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>b.html</title>
</head>
<body>
<script>
document.domain = 'example.com';
window.data = '传送的数据：1111';
</script>
</body>
</html>
开启服务器
这时候只是开启了两个 http 服务器，还需要通过 nginx 做域名映射，将 Example Domain映射到 localhost:8080，sub.example.com 映射到localhost:8081上打开操作系统下的 hosts 文件：mac 是位于 /etc/hosts 文件，并添加：1
2127.0.0.1 www.example.com
127.0.0.1 sub.example.com
windows修改host参考:
http://chongzhuang.windowszj.com/faq/164.html
修改好后保存,这样在浏览器打开两个网址后就会访问本地的服务器.
之后打开 nginx 的配置文件：/usr/local/etc/nginx/nginx.conf，并在 http 模块里添加：1
2
3
4
5
6
7
8
9
10
11
12
13
14server {
listen 80;
server_name www.example.com;
location / {
proxy_pass http://127.0.0.1:8080/;
}
}
server {
listen 80;
server_name sub.example.com;
location / {
proxy_pass http://127.0.0.1:8081/;
}
}
如果访问本地的域名是www.example.com，就由 localhost:8080 代理该请求。所以我们这时候在打开浏览器访问www.example.com的时候其实访问的就是本地服务器 localhost:8080。
3.location.hash实现跨域
在 url 中，http://www.baidu.com#helloworld的#helloworld 就是 location.hash，改变 hash 值不会导致页面刷新，所以可以利用 hash 值来进行数据的传递，当然数据量是有限的。
假设localhost:8080下有文件 cs1.html要和 localhost:8081 下的 cs2.html传递消息，cs1.html首先创建一个隐藏的iframe，iframe 的 src指向 localhost:8081/cs2.html，这时的 hash 值就可以做参数传递。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CS1</title>
</head>
<body>
<script>
// http://localhost:8080/cs1.html
let ifr = document.createElement('iframe');
ifr.style.display = 'none';
ifr.src = "http://localhost:8081/cs2.html#data";
document.body.appendChild(ifr);
function checkHash() {
try {
let data = location.hash ? location.hash.substring(1) : '';
console.log('获得到的数据是：', data);
}catch(e) {
}
}
window.addEventListener('hashchange', function(e) {
console.log('获得的数据是：', location.hash.substring(1));
});
</script>
</body>
</html>
cs2.html 收到消息后通过 parent.location.hash 值来修改 cs1.html 的 hash 值，从而达到数据传递。1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>CS2</title>
</head>
<body>
<script>
// http://locahost:8081/cs2.html
switch(location.hash) {
case "#data":
callback();
break;
}
function callback() {
const data = "some number: 1111"
try {
parent.location.hash = data;
}catch(e) {
// ie, chrome 下的安全机制无法修改 parent.location.hash
// 所以要利用一个中间的代理 iframe
var ifrproxy = document.createElement('iframe');
ifrproxy.style.display = 'none';
ifrproxy.src = 'http://localhost:8080/cs3.html#' + data; // 该文件在请求域名的域下
document.body.appendChild(ifrproxy);
}
}
</script>
</body>
</html>
由于两个页面不在同一个域下IE、Chrome不允许修改parent.location.hash的值，所以要借助于 localhost:8080 域名下的一个代理 iframe 的 cs3.html 页面1
2
3
4
5
6
7
8
9
10
11
12<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>cs3</title>
</head>
<body>
<script>
parent.parent.location.hash = self.location.hash.substring(1);
</script>
</body>
</html>
同样开启服务器
这里为了图方便，将 cs1,2,3 都放在同个文件夹下，实际情况的话 cs1.html 和 cs3.html 要与 cs2.html 分别放在不同的服务器才对。
之后打开浏览器访问 localhost:8080/cs1.html，注意不是 8081，就可以看到获取到的数据了，此时页面的 hash 值也已经改变。
缺点:
- 数据直接暴露在了 url 中
- 数据容量和类型都有限
4.window.name实现跨域
window.name（一般在 js 代码里出现）的值不是一个普通的全局变量，而是当前窗口的名字，这里要注意的是每个 iframe 都有包裹它的window，而这个 window 是top window 的子窗口，而它自然也有 window.name 的属性，window.name 属性的神奇之处在于 name 值在不同的页面（甚至不同域名）加载后依旧存在（如果没修改则值不会变化），并且可以支持非常长的 name 值（2MB）。
举个简单的例子：
你在某个页面的控制台输入：1
2window.name = "Hello World";
window.location = "http://www.baidu.com";
页面跳转到了百度首页，但是window.name却被保存了下来，还是 Hello World，跨域解决方案似乎可以呼之欲出了：
首先创建 a.html 文件：1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>a.html</title>
</head>
<body>
<script>
var data = '';
const ifr = document.createElement('iframe');
ifr.src = "http://localhost:8081/b.html";
ifr.style.display = 'none';
document.body.appendChild(ifr);
ifr.onload = function() {
ifr.onload = function() {
data = ifr.contentWindow.name;
console.log('收到数据:', data);
}
ifr.src = "about:blank";
}
</script>
</body>
</html>
再创建b文件:1
2
3
4
5
6
7
8
9
10
11
12<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>b.html</title>
</head>
<body>
<script>
window.name = "你想要的数据!";
</script>
</body>
</html>
http://localhost:8080/a.html在请求远端服务器http://localhost:8081/b.html的数据，我们可以在该页面下新建一个 iframe，该iframe 的 src 属性指向服务器地址(利用 iframe 标签的跨域能力)，服务器文件 b.html 设置好 window.name 的值。
但是由于 a.html页面和该页面iframe 的 src 如果不同源的话，则无法操作iframe里的任何东西，所以就取不到 iframe 的 name值，所以我们需要在b.html加载完后重新换个src设置成'about:blank;' ,如果不重新指向 src的话直接获取 window.name 的话会获取不到数据.
在a.html中重新设置ifr.src = "about:blank";后,打开两个http服务器,访问http://127.0.0.1:8080/a.html
