筆者目前主要使用Vue進(jìn)行項(xiàng)目開發(fā)，但是我認(rèn)為技術(shù)棧不重要，js才是最重要的，當(dāng)時(shí)css優(yōu)秀也是一名優(yōu)秀的前端小開發(fā)(咳咳)，下邊步入正題啦
一、跨文檔通信API
嘮嗑:我認(rèn)為還是比較常常使用的 尤其是對(duì)于項(xiàng)目嵌入iframe和open簡(jiǎn)直不要太好用，哈哈哈哈，咳咳，寫文章呢，嚴(yán)肅點(diǎn)
(1) 使用vue-router(push)跳轉(zhuǎn)如何使用(這個(gè)其實(shí)不能算作跨域)
父頁(yè)面
//父頁(yè)面添加message監(jiān)聽子頁(yè)面發(fā)送來(lái)的消息
window.addEventListener('message', function (e) {
//自己打印出來(lái)e就可以具體都有哪些值了
//我比較常用的就是 e.data = {msg:"你好哇"}
}, false);
子頁(yè)面
//子頁(yè)面使用postMessage發(fā)送數(shù)據(jù)給父頁(yè)面進(jìn)行相關(guān)的判斷
window.parent.postMessage({
msg:"你好哇"
}, '*');
(2) 使用open打開子頁(yè)面
const openChildWindow = window.open('http://**.**.**.**:8080/#/mypage');
//需要在加載成功后在發(fā)送消息 此時(shí)子頁(yè)面已經(jīng)綁定好監(jiān)聽事件了呢，不然可能會(huì)接收不到
openChildWindow.onload = () => {
openChildWindow.postMessage('hello word', 'http://**.**.**.**:8080/')
}
(3) iframe
嘮嗑:主要使用的是獲取嵌套的iframe的dom- 然后通過(guò)contentWindow進(jìn)行postMessage發(fā)送消息-監(jiān)聽message接收消息
var myframe = document.getElementById('myframe');
myframe.contentWindow.postMessage({data:'parent'}, 'http://localhost:8081');
二、jsonp
jsonp是利用資源不跨域的特性，使用的是script標(biāo)簽的src屬性,因此只能get請(qǐng)求
三、前端不做修改-需要服務(wù)端配置頭部等
Access-Control-Allow-Origin: *
//代表服務(wù)器同意把Cookie發(fā)到服務(wù)器
Access-Control-Allow-Credentials: true 還要給ajax請(qǐng)求設(shè)置withCredentials=true
四、vue框架跨域
本地聯(lián)調(diào)階段使用-在vue.config.js中-devServer進(jìn)行代理配置 (webpack配置)
