对前后端通信的基本了解如何通信跨域

61次阅读

共计 1176 个字符,预计需要花费 3 分钟才能阅读完成。

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 原理
利用 <script 元素的这个开放策略,网页可以得到从其他来源动态产生的 JSON 数据。JSONP 请求一定需要对方的服务器做支持才可以。
2.JSONP 和 AJAX 对比
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 链接上

正文完
 0