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

标签

评论

this is is footer