【前端工程化面试题】webpack proxy的工作原理,为什么能解决跨域问题

在 webpack 的配置文件 webpack.config.js 中有一个配置项 devServer 里面有一个属性是 proxy,这里面可以配置代理服务器,解决跨域问题,请参考官网。

一般来说 webpack 的代理就是说的开发服务器 webpack-dev-server。

其实不光是 webpack 其他的打包工具比如是 vite,也有代理的功能,也是开发服务器。

webpack-dev-server 的工作原理本质是利用了 http-proxy-middleware 这个 http 代理中间件,实现请求转发给其他服务器,webpack-dev-server 是基于 express 实现的,而 express 的本质就是利用了 node 的 http 这个原生模块。

在跨域请求,webpack-dev-server 利用 http-proxy-middleware 启动一个开发服务器,然后这个开发服务器配置本地允许跨域请求,然后将数据转发给实际的服务器,要知道服务器之间的通信是不存在跨域问题的,所以相当于开发服务器做一个代理,从而实现跨域请求。

相关推荐
加减法原则27 分钟前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele1 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4531 小时前
React移动端开发项目优化
前端·react.js·前端框架
你的人类朋友1 小时前
🍃Kubernetes(k8s)核心概念一览
前端·后端·自动化运维
web_Hsir1 小时前
vue3.2 前端动态分页算法
前端·算法
烛阴2 小时前
WebSocket实时通信入门到实践
前端·javascript
草巾冒小子2 小时前
vue3实战:.ts文件中的interface定义与抛出、其他文件的调用方式
前端·javascript·vue.js
DoraBigHead2 小时前
你写前端按钮,他们扛服务器压力:搞懂后端那些“黑话”!
前端·javascript·架构
摘星小杨3 小时前
安装nvm管理node.js,详细安装使用教程和详细命令
node.js·nvm
Xiaouuuuua3 小时前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf