跨域
- 引起跨域的原因：協(xié)議、域名识椰、端口只要有一個(gè)不同都會(huì)導(dǎo)致跨域
解決辦法：
jsonp
- 通常為了減輕web服務(wù)器的負(fù)載绝葡，我們把js、css腹鹉，img等靜態(tài)資源分離到另一臺(tái)獨(dú)立域名的服務(wù)器上藏畅，在html頁(yè)面中再通過(guò)相應(yīng)的標(biāo)簽從不同域名下加載靜態(tài)資源，而被瀏覽器允許种蘸，基于此原理墓赴，我們可以通過(guò)動(dòng)態(tài)創(chuàng)建script，再請(qǐng)求一個(gè)帶參網(wǎng)址實(shí)現(xiàn)跨域通信
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 傳參一個(gè)回調(diào)函數(shù)名給后端航瞭，方便后端返回時(shí)執(zhí)行這個(gè)在前端定義的回調(diào)函數(shù)
script.src = 'http://www.daxihong.com:8080/login?user=admin&callback=jsonCallback';
document.head.appendChild(script);
// 回調(diào)執(zhí)行函數(shù)
function jsonCallback(res) {
alert(JSON.stringify(res));
}
</script>
CORS
- CORS是一個(gè)W3C標(biāo)準(zhǔn)诫硕，全稱(chēng)是"跨域資源共享"（Cross-origin resource sharing）跨域資源共享 CORS 詳解】睿看名字就知道這是處理跨域問(wèn)題的標(biāo)準(zhǔn)做法章办。CORS有兩種請(qǐng)求，簡(jiǎn)單請(qǐng)求和非簡(jiǎn)單請(qǐng)求滨彻。
nodejs中間件代理跨域
- 利用node + webpack + webpack-dev-server代理接口跨域藕届。在開(kāi)發(fā)環(huán)境下，由于vue渲染服務(wù)和接口代理服務(wù)都是webpack-dev-server同一個(gè)亭饵，所以頁(yè)面與代理接口之間不再跨域休偶，無(wú)須設(shè)置headers跨域信息了。后臺(tái)可以不做任何處理辜羊。
- 配置 webpack.config.js || vue.config.js 文件
module.exports = {
entry: {},
module: {},
...
devServer: {
historyApiFallback: true,
proxy: [{
context: '/login',
target: 'http://www.daxihong.com:8080', // 代理跨域目標(biāo)接口
changeOrigin: true,
secure: false, // 當(dāng)代理某些https服務(wù)報(bào)錯(cuò)時(shí)用
cookieDomainRewrite: 'www.daxihong.com' // 可以為false踏兜，表示不修改
}],
noInfo: true
}
}
js監(jiān)聽(tīng)對(duì)象屬性的改變
- es5
對(duì)單個(gè)屬性：假設(shè)是對(duì)user對(duì)象的name屬性進(jìn)行監(jiān)聽(tīng)
Object.defineProperty(user, 'name', {
set : funtion(value){
name = value;
console.log('set: name:' + value)
}
})
對(duì)多個(gè)屬性進(jìn)行監(jiān)聽(tīng)
Object.defineProperties(obj,{
a : {
configurable: true, // 設(shè)置屬性可以更改，默認(rèn)為false
set : function(value){}
},
b : {
configurable: true, // 設(shè)置屬性可以更改八秃，默認(rèn)為false
set : function(value){}
}
}
})
- es6通過(guò)Proxy實(shí)現(xiàn)
原理就是當(dāng)這個(gè)屬性改變后進(jìn)行一次攔截碱妆，會(huì)得到新的值，記得要將他的新值賦值給那個(gè)要改變的屬性昔驱，布草做的話(huà)就相當(dāng)于沒(méi)有給這個(gè)屬性改變
var peo = { name: 'zhangsan', salary: 27 }
//interceptor 攔截
var interceptor = {
set: function (recObj, key, value) {
console.log(key, 'is changed to', value) //name is changed to lisi
recObj[key] = value
},
}
//創(chuàng)建代理以進(jìn)行偵聽(tīng)
proxyEngineer = new Proxy(peo, interceptor)
//做一些改動(dòng)來(lái)觸發(fā)代理
proxyEngineer.name = 'lisi'
console.log(peo) //{name: "lisi", salary: 27}
