防抖节流

防抖：

防止用户在短时间内多次进行请求操作

（和点击或者滚动无关，只和发请求的频率有关）

防抖有N种方式（没有最好只有最适合一个功能的方式）：

1. 监听数据变化

    对比数据变化前后，未变化就不发送请求。

2. 验证码插件

3. 节流（让某个函数只能在特定时间才运行一次）

节流：（定时器）

让某个函数在短时间内只能运行一次

防抖节流属于性能优化的一种（非常经典的优化，能大量降低服务器的冗余请求）

跨域：

跨域产生在发送请求时，当请求服务器和响应服务器不是同一台时，就会产生跨域

非同源的服务器互相访问时，就会产生跨域

浏览器为了数据安全，给XMLHTTPRequest施加了安全限制，只允许页面请求自己服务器的数据

同源：

协议  :    ip    ：端口

三者都相同时，就会同源，不会有跨域问题

跨域的解决方案：

1. （主流）后端设置允许请求头（让服务器来解决）

（工程师设置自己服务器可允许访问的ip）

2. jsonp（由前端来解决 很古老的一种解决方案）

原理： 利用html标签的开源策略

  使用script标签去发送请求

早期原生js和jquery解决跨域的方法

//这里只是jsonp的发送，怎么收服务器接口响应的值呢？

<script src='http://服务器ip:端口/接口?callback=函数'></script>

//接收

函数（res）{

}

标签请求和ajax请求是不一样的，所以后端也要单独处理

3. （主流）反向代理服务器

vue 配置proxy 解决

 在vue根目录下创建vue.config.js,配置项devServer

方式一：

        此方式适合仅在项目中只向一个服务器发送请求

        vue.config.js: 

            module.exports={

                devServer: {

                    proxy: "服务器域名"  // 需要代理发送请求到的服务器域名

                }

            }

            发送请求时：

                    axios.get("/cross").then(res=>{....})      

方式二：

        此方式适合在项目中向一个或者多个服务器发送请求

        vue.config.js: 

        module.exports={

           devServer:{

                proxy:{

                    '/api':{         //   区分服务器的key

                        target:'服务器域名',      //  当监听到有/api的请求，则让target代理发送请求。

                        ws: false,   //  是否为websoket接口，我们常规都是http协议，可以不写。

                        changeOrigin:true，//  是否跨域

                        pathRewrite: {

                            "^/api" : ""  // 请求是把区分服务器的key替换为空，为了请求的地址正确

                        }

                        },

                }

              }

            }

           发送请求时：

                    axios.get("/api/cross").then(res=>{....})      

                    //     请求地址：区分服务器的key+你要访问的地址("/cross")

proxy官方文档:https://cli.vuejs.org/zh/config/#devserver-proxy