跨域 && 监听对象改变

跨域

• 引起跨域的原因：协议、域名、端口只要有一个不同都会导致跨域

解决办法：

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}