26.6、6种跨域获取数据的方法
2020-07-25 本文已影响0人
一土二月鸟
这个整理的更好： https://blog.51cto.com/u_14115828/3733252
前奏
- 同源的iframe之间，可以通过window的属性进行传值。
- 如果页面A中，包含iframe页面B，A通过iframeB.contentWindow可以获取B页面window的属性值。
- 页面B可以通过window.parent获取A页面的window的属性值。
// ps 做此测试，需要将页面放置服务器，浏览器直接打开本地文件会报跨域错误
// 本地安装npm后，可在页面所在文件夹通过npx httpserver命令启动本地服务器
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
我是页面A
<iframe src="./B.html"></iframe>
<script type="text/javascript">
var iframeB = document.getElementsByTagName('iframe')[0];
iframeB.onload = function () { // 通过onload事件，等页面加载完了才可以获取被加载页面的属性
console.log(iframeB.contentWindow.x); // b-x
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
我是页面B
<script type="text/javascript">
window.x = 'b-x';
</script>
</body>
</html>
- iframe如果和所在页面不同源，可以正常载入页面，但是通过iframe.contentWindow或window.parent获取属性值时，会报跨域错误
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
我是页面A
<iframe src="http://localhost:8081/test1.html"></iframe>
<script type="text/javascript">
var iframeB = document.getElementsByTagName('iframe')[0];
iframeB.onload = function () {
console.log(iframeB.contentWindow); // 运行结果见下图
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
我是页面test1
<script type="text/javascript">
window.x = 'test1-x';
</script>
</body>
</html>
- 不同源页面之间，在同一窗口发生跳转时，可以共享window.name属性。
- 如页面A跳转到页面test1，但是没有打开新窗口，此时页面B将能获取到页面A中定义的window.name属性值。
- ps：只有name属性值可以共享，其他自定义属性值无法共享。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
</head>
<body>
我是页面A <br />
<a href="http://localhost:8081/test1.html" target="_self">跳到页面B</a>
<script type="text/javascript">
window.name = 'a-x';
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
我是页面test1
<script type="text/javascript">
console.log(window.name);
</script>
</body>
</html>
跨域 1 服务器中转
- 适用于ajax请求
- 服务器没有跨域的影响，因此可以通过此方法解决
跨域 2 iframe
- 对于根域名相同、二级域名不同的网站，可以通过iframe载入目标网站，通过iframe.contentWindow获取到目标网站的ajax工具对象或目标网站的xhr对象(xhr方式未验证，理论上可行)，然后再发起请求可以达到跨域的目的。
- 前提需要将不同源网站的domain都赋值相同的一级域名。一级域名需要是当前网站的一级域名。
扩展参考：https://blog.csdn.net/nlznlz/article/details/79506655
跨域 3
-
想要获取不同源的iframe的contentWindow值，可以将iframe的页面进行跳转，跳转到和父页面相同源的网站，iframe跳转时，通过window.name进行传值。最终父页面可以获取到同源子页面的contentWindow的值。
跨域 4
-
不同源页面通过postmessage和onmessage进行解决
跨域5
-
通过iframe + loaction 将iframe页面的数据，通过url传递给同源页面。
image.png
跨域6
- 后端配置Access-Control-Allow-Origin:* 或指定网站
总结
3 + 4
JSONP
服务器：中转；配置Access；
iframe：iframe+domain(子域名跨域)；iframe+window.name；iframe+url参数；iframe+postmessage/onmessage；
疑问2
- 可能会涉及到跨域的场景 ajax请求、iframe通过contentWindow获取子页面的值
- 解决跨域的方式
1 通过服务器代理请求目标网站
2 服务器设置access control allow origin
3 jsonp
4 ????
疑惑1
- 如何去掉options
- cache-control是默认的吗？
-1. 服务器如何知晓返回的文件类型或语言和accept希望的不一致，从而返回406.
-
为什么刷新任何一个网站的时候，都没有304，而是200
-
tcp是可靠的连接，是否可以基于tcp直接传输数据，不经过http等协议
-
四次挥手 如果是服务器发起 流程是怎样
2.1 时间线的开始阶段是发生在TCP/IP断开连接之前发生的 我这样理解有问题吗？
当HTML页面被下载下来后，就立马进入时间线流程了，但TCP/IP四次挥手是要等http请求结束后才会触发的 因此时间线的开始要早于四次挥手 -
http一定是基于tcp？客户端cs架构一般用的什么协议？
-
post请求时，会在tcp第三次握手时，先将请求头传输到服务器，服务器返回100后，客户端继续请求，为什么浏览器看不到100？
-
验证网速特别慢时，是否会等图片加载结束后，才执行onload
how browser work
下图为什么没有406
ajax相关
- 封装ajax时，对于post请求为什么要设置xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 如果不设置该请求头，默认也是可以正常访问的呀！
