不同跨域方式实现原理
实现跨域方式 1.JSONP跨域方案
2.CORS跨域资源共享
3.基于http proxy实现跨域处理
4.基于post message实现跨域
5.基于iframe跨域
6.Web socket和nginx反向代理
跨域（非同源策略请求）
同源策略请求 ajax/fetch
跨域传输
（1）部署到web服务器上：同源策略
-xampp修改本地的host文件
（2）服务器拆分
Web服务器：静态资源；data服务器：业务逻辑和数据分析；图片服务器
同源跨域区分：协议域名端口号只要一个不同即跨域。
第三方开源数据接口
1.JSONP跨域的实现原理(需要服务器端的支持)
标签:-script -img -link -iframe 不存在跨域请求的限制
(1)本地创建script标签 src=https://www.it610.com/article/”http://127.0.0.1:4000/list?callback=func”
Function func(){
//do something
}
(2)客户端向服务器发请求，同时会把本地的一个函数传递给服务器
(3)服务接到客户端发来的请求callback=func
(4)准备数据data=https://www.it610.com/article/{。。}
(5)给客户端返回数据“func（+JSON.stringify(data)+）”
文章图片
文章图片
Jsonp的缺点：JSONP只能处理GET请求，数据不安全。
【不同跨域方式实现原理】2.CORS跨域资源共共享
服务器端express+node实例，客户端正常发起ajax
文章图片
文章图片
3.http proxy代理 （webpack webpack-dev-server中进行配置）
文章图片
4.Ngnix服务器反向代理（linux部署）
文章图片
5.postMessage
文章图片
文章图片
6.socket.io
WebSocket协议跨域
前端处理
文章图片
服务器端处理
文章图片
7.document.domain+iframe(实现同一个主域，不同子域的操作)
文章图片
推荐阅读
- 关于QueryWrapper|关于QueryWrapper,实现MybatisPlus多表关联查询方式
- mybatisplus|mybatisplus where QueryWrapper加括号嵌套查询方式
- 别墅庭院设计，不同的别墅庭院设计也给人视觉上完全不一样的！
- 2018，不同寻常
- 蓝桥杯试题
- 名校和普校到底有什么不同（）
- 10.两种记账方式
- 数据库|SQL行转列方式优化查询性能实践
- 不同寻常的书呆子
- 我们每个人都是不同的，你敢这样吗（）