跨域通信
概念
直接跨域会导致什么问题？
请求被拦截，提示没有允许跨域
跨域方式
CORS跨域
跨域资源共享
服务端设置响应头部：Access-Control-Allow-Origin，允许请求源
jsonp跨域
jsonp的工作原理，如何执行
使用方式
请求携带回调函数
响应方拿到回调函数，并传入参数，并返回
postMessage跨域
使用场景：同一页面的父子窗口
使用方式
发送消息：父页面通过子页面的窗口代理向子页面发送消息
接收消息：监听message事件，，通过事件处理器获取消息体，（并可验证消息源）
window.name跨域
window.name的特点：
每一个窗口共享window.name
窗口存在期间，载入的所有页面拥有该参数的读写权限
window.name可以存储不超过2M的数据，数据格式可自定义
使用方式
在a页面，添加iframe,设置src为目标页面，待iframe加载结束，修改iframe的src指向同源页面，再访问iframe窗口对应的name属性
location.hash跨域
同源数据互访
使用方式
在a页面，添加iframe,设置src为目标页面c，将目标页面的数据，添加到子窗口b页面的url路径上，b页面可直接修改a页面的hash
后端设置代理跨域
原理：因为JS同源策略是浏览器的安全策略，所以在浏览器客户端不能跨域访问，而服务器端调用HTTP接口只是使用HTTP协议，不会执行JS脚本，不需要同源策略
使用方式
前端发出同源请求，服务端转发请求，并返回结果
document.domain跨域
websocket跨域
该协议不实行同源策略
使用方式：客户端发起连接，之后监听事件，获取数据
form表单跨域
原理：form只是提交数据，不会返回数据，js脚本不会读取跨域数据
使用方式：使用form提交请求，使用postmessage返回数据
关闭浏览器跨域限制
|