后端传输流跨域_对前后端通信的基本了解——如何通信、跨域？

1、什么是浏览器的同源政策限制？

端口，域名，协议 ，只要一个不一样就跨域

2、前后端如何通信？

常见通信的几种方式

Ajax : 短连接

Websocket : 长连接，双向的。

CORS fetch()

Form表单(最原始的)

Ajax是如何通信的

基本通信原理：

浏览器可以发出HTTP请求与接收HTTP响应，实现在页面不刷新的情况下和服务端进行数据交互。

实现过程：

1) 创建XMLHttpRequest对象(异步调用对象)

var xhr = new XMLHttpRequest();

2) 创建新的Http请求(方法、URL、是否异步)

xhr.open(‘get’,’example.php’,false);

3) 设置响应HTTP请求状态变化的函数。

onreadystatechange事件中readyState属性等于4。响应的HTTP状态为status==200(OK)或者304(Not Modified)。

4) 发送http请求

xhr.send(data);

5) 获取异步调用返回的数据

优点：

提高用户体验，较少网络数据的传输量

Fome表单是如何通信

基本通信原理：

通过form表单以post/get方式提交数据。

实现过程：

当你点击submit按钮时，浏览器会默认把你在input里面输入的数据，以post或get的方式提交到form表单中的action这个地址。相当于你提交表单时，就会向服务器发送一个请求，然后服务器会接受并处理提交过来的form表单，最后返回一个新的网页。

缺点：

1、单项提交，页面会发生跳转或刷新，导致用户体验不好

3、浪费宽带。

改用ajax。

了解Websocket

建立在TCP协议之上，与HTTP协议有着良好的兼容性

3、跨域通信有几种？

引JSONP

Hash(url#后面的，改变页面不刷新)

postMessage(H5中新增的)

WebSocket

CORS

介绍以下最常用的JSONP

1.JSONP原理

利用

JSONP和AJAX相同，都是客户端向服务器端发送请求，从服务器端获取数据的方式。但AJAX属于同源策略，JSONP属于非同源策略(跨域请求)

3.JSONP优缺点

JSONP优点是兼容性好，可用于解决主流浏览器的跨域数据访问的问题。缺点是仅支持get方法具有局限性

4、GET与post区别？

POST与GET的区别

1、GET请求会被浏览器主动缓存，而POST不会

2、GET请求参数会被完整保留在浏览器历史记录里，而POST中参数不会被保留

3、GET请求在URL中传送的参数是有长度限制的，而POST没有限制

4、GET比POST更不安全，因为参数直接暴露在URL上，所以不能用来传递敏感信息

本质上都建立在TCP链接上