跨域
- 引起跨域的原因：协议、域名、端口只要有一个不同都会导致跨域
解决办法：
jsonp
- 通常为了减轻web服务器的负载，我们把js、css，img等静态资源分离到另一台独立域名的服务器上，在html页面中再通过相应的标签从不同域名下加载静态资源，而被浏览器允许，基于此原理，我们可以通过动态创建script，再请求一个带参网址实现跨域通信
<script>
var script = document.createElement('script');
script.type = 'text/javascript';
// 传参一个回调函数名给后端，方便后端返回时执行这个在前端定义的回调函数
script.src = 'http://www.daxihong.com:8080/login?user=admin&callback=jsonCallback';
document.head.appendChild(script);
// 回调执行函数
function jsonCallback(res) {
alert(JSON.stringify(res));
}
</script>
CORS
- CORS是一个W3C标准，全称是"跨域资源共享"（Cross-origin resource sharing）跨域资源共享 CORS 详解。看名字就知道这是处理跨域问题的标准做法。CORS有两种请求，简单请求和非简单请求。
nodejs中间件代理跨域
- 利用node + webpack + webpack-dev-server代理接口跨域。在开发环境下，由于vue渲染服务和接口代理服务都是webpack-dev-server同一个，所以页面与代理接口之间不再跨域，无须设置headers跨域信息了。后台可以不做任何处理。
- 配置 webpack.config.js || vue.config.js 文件
module.exports = {
entry: {},
module: {},
...
devServer: {
historyApiFallback: true,
proxy: [{
context: '/login',
target: 'http://www.daxihong.com:8080', // 代理跨域目标接口
changeOrigin: true,
secure: false, // 当代理某些https服务报错时用
cookieDomainRewrite: 'www.daxihong.com' // 可以为false，表示不修改
}],
noInfo: true
}
}
js监听对象属性的改变
- es5
对单个属性：假设是对user对象的name属性进行监听
Object.defineProperty(user, 'name', {
set : funtion(value){
name = value;
console.log('set: name:' + value)
}
})
对多个属性进行监听
Object.defineProperties(obj,{
a : {
configurable: true, // 设置属性可以更改，默认为false
set : function(value){}
},
b : {
configurable: true, // 设置属性可以更改，默认为false
set : function(value){}
}
}
})
- es6通过Proxy实现
原理就是当这个属性改变后进行一次拦截，会得到新的值，记得要将他的新值赋值给那个要改变的属性，布草做的话就相当于没有给这个属性改变
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
},
}
//创建代理以进行侦听
proxyEngineer = new Proxy(peo, interceptor)
//做一些改动来触发代理
proxyEngineer.name = 'lisi'
console.log(peo) //{name: "lisi", salary: 27}
