【九月打卡】第十三天 + 前端框架及项目面试
2022/9/18 4:16:20
本文主要是介绍【九月打卡】第十三天 + 前端框架及项目面试,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
课程名称:前端框架及项目面试 聚焦Vue3/React/Webpack
课程章节:Vue3.0
主讲老师:双越老师
课程内容:
今天学习内容包括:
配置代理
课程收获:
配置代理
devServer: { proxy: 'http://localhost:5000' }
优点:配置简单,请求资源时直接发给前端(8080)即可。
缺点:不能配置多个代理,不能灵活的控制请求是否走代理。
工作方式:若按照上述配置代理,当请求了前端不存在的资源时,那么该请求会转发给服务器(优先匹配前端资源)。
module.exports = { pages: { index: { // 入口 entry: 'src/main.js', }, }, lintOnSave: false, //关闭语法检查 // 开启代理服务器 (方式二) devServer: { proxy: { '/api1': { //匹配所有以 /api1 开头的请求路径 target: 'http://localhost:5000', //代理目标的基础路径 pathRewrite: {'^/demo': ''}, //去掉请求头匹配目标地址 ws: true, //用于支持 websocket changeOrigin: true //用于控制请求头中的 host值 } } } }
changeOrigin 设置为 true 时,服务器收到的请求头中的 host 为:localhost: 5000
changeOrigin 设置为 false 时,服务器收到的请求头中的 host 为:localhost: 8000
changeOrigin 默认值为 true
优点:可以配置多个代理,且可以灵活的控制请求是否走代理。
缺点:配置略微繁琐,请求资源时必须加前缀。
注意事项
方法一虽然配置简单,但一次只能代理 一个 服务器。方法二一次可以代理 多个 服务器。
vue.config.js 中配置的地址是 500x(5050),在 App.vue 中 axios 通过 get 得到的地址是 808x(8080)。
方法二在配置过程中,要对请求头通过正则表达式进行 重写,这样可以去掉 axios 请求地址的请求前缀,才能正确匹配。
课程学习截图:
这篇关于【九月打卡】第十三天 + 前端框架及项目面试的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-09一定要避坑:关于微信H5分享,温馨提示你不要再踩坑了!!!
- 2024-05-09本地项目放到公网访问!炒鸡煎蛋!
- 2024-04-07金融企业区域集中库的设计构想和测试验证
- 2024-03-11前端CSS的工程化——掌握Sass这四大特性就够了
- 2024-02-21h5关联css样式(html怎么和css关联)-icode9专业技术文章分享
- 2024-02-07Firefox禁止远程字体加速网页加载及图标字体补充安装
- 2024-02-07一个菜鸡前端的3年总结-「2023」
- 2024-01-18最火前端Web组态软件(可视化)
- 2024-01-12程序员提效 x10 的必备开源“神器”
- 2024-01-11前端可以监控静态资源的时间吗-icode9专业技术文章分享