跨域通信的几种方式

Posted lilicat

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了跨域通信的几种方式相关的知识,希望对你有一定的参考价值。

跨域通信的几种方式

  • JSONP
  • Hash(hash改变,页面不刷新)
  • postMessage(hmtl5中新增加的,用来实现跨域)
  • WebSocket(不受同源限制)
  • CORS(支持跨域通信的AJAX,浏览器会拦截AJAX请求,如果是跨域的,在HTTP头中加一个origin)
JSONP

jsonp的实现原理,script标签的异步加载。

util.jsonp = (url, onsuccess, onerror, charset) => {
    let callbackName = url.getName(‘tt_player‘)
    window[callbackName] = function () {
        if (onsuccess && onsuccess instanceof Function) {
            onsuccess(arguments[0])
        }
    }
    let script = util.createScript(url + ‘&callback=‘ + callbackName, charset)
    script.onload = script.onreadystatechange = function () {
        if (!script.readyState || /loaded|complete/.test(script.readyState)) {
            script.onload = script.onreadystatechange = null
            // 移除该script的DOM对象
            if(script.parentNode) {
                script.parentNode.removeChild(script)
            }
            // 删除函数或变量
            window[callbackName] = null
        }
    }
    script.onerror = function () {
        if (onerror && onerror instanceof Function) {
            onerror()
        }
    }
    document.getElementsByTagName(‘head‘)[0].appendChild(script)
}
util.createScript = (url, charset) => {
    let script = document.createElement(‘script‘)
    script.setAttribute(‘type‘, ‘text/javascript‘)
    charset && script.setAttribute(‘charset‘, charset)
    script.setAttribute(‘src, url)
    script.async = true
    return script
}
  1. 浏览器用加载script标签的方式,给服务端发请求(回调名jsonp等)。创建一个json全局函数
  2. 服务器返回js块内容(回调名和代码),调用jsonp函数就能运行了。
<script src="http://www.abc.com/?data=name&callback=jsonp" charset="utf-8"></script>
<script>
    jsonp({data: {}})
</script>
Hash

利用hash,场景是当前页面A,通过iframe或frame嵌入了跨域的页面B

// 在A中伪代码如下
var B = document.getElementByTagName(‘iframe‘)
B.src = B.src + ‘#‘ + ‘data‘
window.onhashchange = function () {
    var data = window.location.hash
}
postMessage
// 窗口A(http://A.com)向跨域的窗口B(http://B.com)发送信息
Bwindow.postMessage(‘data‘, ‘http://B.com‘) // B窗口下的window
// 在窗口B中监听
window.addEventListener(‘message‘, function(event) {
    console.log(event.origin) // http://A.com
    console.log(event.source) // Awinodw
    console.log(event.data) // data!
}, false)
WebSocket
var ws = new WebSocket(‘wss://echo.websocket.org‘) // ws或者wss(加密),后面指向服务器的地址
ws.onopen = function (evt) {
    console.log(‘Connection open...‘)
    ws.send(‘Hello WebSocket!‘)
}

ws.onmessage = function (evt) {
    console.log(‘Received Message: ‘ + evt.data)
    wx.close()
}

ws.onclose = function (evt) {
    console.log(‘Connection closed‘)
}
CORS

参考资料: http://www.ruanyifeng.com/blog/2016/04/cors.html

var ws = new WebSocket(‘wss://echo.websocket.org‘) // ws或者wss(加密),后面指向服务器的地址
fetch(‘/some/url‘, {
    method: ‘get‘
}).then(res => {}).catch(err => {})

 

以上是关于跨域通信的几种方式的主要内容,如果未能解决你的问题,请参考以下文章

前端跨域的几种方式

跨域以及解决跨域的几种方式

窗口之间通信类

跨域请求资源的几种方式

跨域的几种方法

解决浏览器跨域的几种方式