前端必问面试题-通信类

最新推荐文章于 2021-10-24 20:20:20 发布

哇哈哈矿泉水真好喝

最新推荐文章于 2021-10-24 20:20:20 发布

阅读量189

点赞数

分类专栏：前端基础文章标签：前端基础通信类

本文链接：https://blog.csdn.net/weixin_42281924/article/details/103463589

版权

前端基础专栏收录该内容

4 篇文章 0 订阅

订阅专栏

1.什么是同源策略及限制

同源策略限制从一个源加载的文档或者脚本如何与来自另一个源的资源进行交互，这是一个用于隔离潜在恶意文件的关键的安全机制。

如果不同源？

1.cookie、localStorage和indexDB无法读取
2.DOM无法获得
3.AJAX请求不能发送

2.前后端如何通信

1.Ajax 必须同源
2.WebSocker 都可以
3.CORS 都可以

3.如何创建AJAX

3.1XMLHttpRequest对象的工作流程

3.2兼容性处理

3.3事件的触发条件

3.4事件的出发顺序

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script>
function loadXMLDoc()
{
	var xmlhttp;
	if (window.XMLHttpRequest)
	{
		//  IE7+, Firefox, Chrome, Opera, Safari 浏览器执行代码
		xmlhttp=new XMLHttpRequest();
	}
	else
	{
		// IE6, IE5 浏览器执行代码
		xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
	}
	xmlhttp.onreadystatechange=function()
	{
		if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("myDiv").innerHTML=xmlhttp.responseText;
		}
	}
	xmlhttp.open("GET","/try/ajax/ajax_info.txt",true);
	xmlhttp.send();
}
</script>
</head>
<body>

4.跨域通信的几种方式

1.JSONP
原理同时script标签的src传递callback和data，再执行callback函数。

jsonp.html

<html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <title></title>
 5     <script type="text/javascript">
 6     var localHandler = function(data){
 7         alert('我是本地函数，可以被跨域的remote.js文件调用，远程js带来的数据是：' + data.result);
 8     };
 9     </script>
10     <script type="text/javascript" src="http://remoteserver.com/remote.js"></script>
11 </head>
12 <body>
13  
14 </body>
15 </html>

服务器端的js remote.js 文件代码如下：

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

详解：https://www.cnblogs.com/haishen/p/9801108.html

2.Hash
假设页面a.html与b.html进行跨域通信，在a.html中创建iframe，通过src+#+data进行通信

//页面a发送
var B=document.getElementByTagName('iframe');
B.src=B.src+'#'+'data'
//页面b接收
window.onhashchange=function(){
var data=window.location.hash;
}

3.postMessage

//a页面
Bwindow.postMessage('data','http://B.com');第二个参数是添加源，保证安全.Bwindow表示选择b窗口
//b页面
window.addEventListener('message',function(event){
console.log(event.origin)//数据源
console.log(event.source)//窗口对象
console.log(event.data)//数据
}.false)

4.WebSocket

var ws =new WebSocket('wss://echo.websocket.org')
//创建连接
ws.onopen = function(event){
ws.send('打开成功')
}
//接收消息
ws.onmessage = function(event){
console.log(event.data);
ws.close;//关闭
}

ws.onclose = function(){
console.log('以关闭')
}

5.CORS

//使用fetch来访问连接
fetch(url).then(response => response.json())
  .then(data => console.log(data))
  .catch(e => console.log("Oops, error", e))

后端拦截器上加

Access-Control-Request-Method：该字段是必须的，用来列出浏览器的CORS请求会用到哪些HTTP方法，上例是PUT。
Access-Control-Request-Headers：该字段是一个逗号分隔的字符串，指定浏览器CORS请求会额外发送的头信息字段，上例是X-Custom-Header
Access-Control-Allow-Methods：该字段必需，它的值是逗号分隔的一个字符串，表明服务器支持的所有跨域请求的方法。注意，返回的是所有支持的方法，而不单是浏览器请求的那个方法。这是为了避免多次"预检"请求。
Access-Control-Allow-Headers：如果浏览器请求包括Access-Control-Request-Headers字段，则Access-Control-Allow-Headers字段是必需的。它也是一个逗号分隔的字符串，表明服务器支持的所有头信息字段，不限于浏览器在"预检"中请求的字段。
Access-Control-Allow-Credentials： 该字段与简单请求时的含义相同。
Access-Control-Max-Age： 该字段可选，用来指定本次预检请求的有效期，单位为秒。上面结果中，有效期是20天（1728000秒），即允许缓存该条回应1728000秒（即20天），在此期间，不用发出另一条预检请求。