20201027李权

懒加载：

问题：单页面的致命问题：首屏加载过慢，因为单页面加载极慢。因为单页面应用默认必须在首次请求，把所有页面的组件都下载到客户端本地

1.异步延迟加载

cors：

优点：仅服务器端可以修改

缺点：必须知道客户端的具体的ip地址

*千万不要使用，具体请求的url：http：localhost:8080/

安装:npm install cors --save

导入：app.js中

const cors = require('cors');

app.use(cors{

​ origin:[

​ //允许跨域客户端的源头

​ 'http:localhost:8080/','http://localhost:8080/'

​ ],

​ credentials:true; //允许携带cookie

})

JSONP:

优点：不需要知道客户端具体的ip地址

缺点：需要客户端和服务端一起调整

如果服务器觉得cors也不好用，jsonp也不好用就不会做跨域问题

前端实现跨域：

解决：利用Vue脚手架自带的http-proxy代理程序进行跨域

1.在vue的脚手架里配置文件，vue.confige.js

devServer:{
    proxy:{
        //为所有的服务器端接口起一个别名，为了和vue脚手架中的其他页面路由地址进行一个区分
        '/api':{
            target:'http://localhost:3000',
            changeOrigin:true; //打开跨域
            pathRewrite:{
                '^/api:'' //匹配浏览器端的/api替换为我们的target的页面，路径之后再和target中的基础路径进行拼接起来作为发送到服务器端的最终请求地址
            }
        }
    }
}
//原理就是devServer:不使用ajax，也能发送http请求的程序，先将相对路径的/api去掉，变为/detail,再和提前配置好的服务器地址target进行拼接 http:localhost:3000/detail

4.向真实的服务器接口地址发送请求，devServer接到相应结果

5.返回给axios.then(res)继续进行处理

注意：只有访问没有启用跨域的服务器端时，使用http-proxy,不能和其他跨域方式并存的
注意：只能在本地开发环境下使用，部署到服务器，就不在起作用了

浏览器进行跨域：

--disable-web-security --user-data-dir=D:\MyChromeDevUserData