【前端工程化面试题】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 启动一个开发服务器,然后这个开发服务器配置本地允许跨域请求,然后将数据转发给实际的服务器,要知道服务器之间的通信是不存在跨域问题的,所以相当于开发服务器做一个代理,从而实现跨域请求。

相关推荐
@菜菜_达23 分钟前
CSS a标签内文本折行展示
前端·css
霸王蟹31 分钟前
带你手写React中的useReducer函数。(底层实现)
前端·javascript·笔记·学习·react.js·typescript·前端框架
托尼沙滩裤36 分钟前
【Vue3】实现屏幕共享惊艳亮相
前端·javascript·vue.js
啃火龙果的兔子41 分钟前
前端八股文-vue篇
前端·javascript·vue.js
孜然卷k1 小时前
前端处理后端对象类型时间格式通用方法封装,前端JS处理JSON 序列化后的格式 java.time 包中的日期时间类
前端·json
幼儿园技术家1 小时前
微信小程序实现用户进行推客的注册绑定
前端
gwcgwcjava1 小时前
[技术积累]成熟的前端和后端开发框架
前端
bbsh20991 小时前
SiteAzure:SetCookie 未设置Secure
前端·网络·安全·siteazure
Mintopia1 小时前
计算机图形学环境贴图(Environment Mapping)教学指南
前端·javascript·计算机图形学
码农之王1 小时前
(二)TypeScript前置编译配置
前端·后端·typescript