前言
- 常网IT戳我呀!
- 常网IT源码上线啦!
- 本篇录入吊打面试官专栏,希望能祝君拿下Offer一臂之力,各位看官感兴趣可移步🚶。
- 有人说面试造火箭,进去拧螺丝;其实个人觉得问的问题是项目中涉及的点 || 热门的技术栈都是很好的面试体验,不要是旁门左道冷门的知识,实际上并不会用到的。
- 请问webpack代理原理?
- 我相信这是面试Webpack最经常被问到最多的一道题目。
思想觉醒:突破笼子里面的囚禁。
一、webpack
我们可以先简单和面试官拉扯一下:webpack能干什么。
webpack是静态模块打包工具。
webpack 的主要特点包括:
- 模块化:支持 CommonJS、AMD、ES6 模块等多种模块规范。
- 资源管理:可以处理 JavaScript、css样式表、图片等各种资源文件。
- 代码拆分:能够将代码拆分成多个 bundle,实现按需加载。
- 插件系统:丰富的插件生态系统,可以扩展 webpack 的功能。
- 热更新:支持热模块替换(Hot Module Replacement),在开发过程中实现实时更新。
二、webpack代理
Webpack 代理的原理是在开发环境中,为了解决前端应用需要请求后端 API 接口的问题,可以通过配置一个代理服务器来转发请求。这样可以避免跨域问题,并且方便开发人员在本地调试前端应用时进行接口调用。
在Webpack中,通常可以使用类似于 devServer.proxy
的配置选项来设置代理。当前端应用发送请求到指定的路径时,代理服务器会将这些请求转发到配置的目标服务器上,并将响应返回给前端应用。
三、http-proxy-middleware
webpack内部是通过http-proxy-middleware 这个库,它是用于创建代理服务器的中间件。
java
const proxyMiddleware = require('http-proxy-middleware');
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://backend-api.com',
pathRewrite: { '^/api': '' },
changeOrigin: true,
secure: false,
},
},
},
};
- target:指定目标服务器的地址。
- pathRewrite:可以对请求路径进行重写操作,比如将 "/api" 替换为空字符串 ""。
- changeOrigin:设置为 true,则请求头中的 origin 字段会被设置为目标服务器地址。
- secure:设置为 false,则允许代理服务器接受具有无效 SSL 证书的目标服务器。
四、http-proxy-middleware 内部怎么实现了请求的转发
没想到啊,没想到,以为回答了上面的,就下一题了,没想到面试官不依不饶继续追问:http-proxy-middleware 内部怎么实现了请求的转发?
行吧,还好哥是练家子!
其核心机制是使用 Node.js 的 http、https 模块来创建代理服务器,并通过这个代理服务器来转发请求到目标服务器上。
- 当代理服务器收到前端应用发送的请求时,http-proxy-middleware 会根据配置的代理规则匹配请求的路径。
- 一旦匹配成功,http-proxy-middleware 会创建一个代理请求对象,并设置该请求对象的方法、URL、头部等信息,保留了原始请求的所有信息。
- http-proxy-middleware 使用 Node.js 的 http 或 https 模块创建一个新的请求对象,将代理请求对象中的信息应用到这个新的请求对象上。
- 接着,http-proxy-middleware 通过创建的 http/https 请求对象,将代理请求发送给目标服务器。
- 目标服务器收到代理请求后,处理该请求并返回响应。
- http-proxy-middleware 接收到目标服务器返回的响应后,将该响应返回给前端应用。
在实现过程中,http-proxy-middleware 还对请求和响应进行了一些处理,比如支持对请求路径的重写、修改请求头、处理响应头等操作,以满足更复杂的代理需求。
总的来说,http-proxy-middleware 利用 Node.js 提供的 http、https 模块,通过创建代理服务器并处理代理请求的方式,实现了请求的转发功能。
后记
webpack代理原理?
我们再来总结一下回答:
🙋🏻♂️我个人主要从三个方面回答
-
Webpack 代理的原理是在开发环境中,为了解决前端应用需要请求后端 API 接口的问题,可以通过配置一个代理服务器来转发请求。在Webpack中,通常可以使用类似于 "devServer.proxy" 的配置选项来设置代理。当前端应用发送请求到指定的路径时,代理服务器会将这些请求转发到配置的目标服务器上,并将响应返回给前端应用。
-
内部用到http-proxy-middleware 这个库,它是用于创建代理服务器的中间件。
-
那他内部是怎么实现了请求的转发?其核心机制是使用 Node.js 的 http、https 模块来创建代理服务器,并通过这个代理服务器来转发请求到目标服务器上。
- 当代理服务器收到前端应用发送的请求时,http-proxy-middleware 会根据配置的代理规则匹配请求的路径。
- 一旦匹配成功,http-proxy-middleware 会创建一个代理请求对象,并设置该请求对象的方法、URL、头部等信息,保留了原始请求的所有信息。
- http-proxy-middleware 使用 Node.js 的 http 或 https 模块创建一个新的请求对象,将代理请求对象中的信息应用到这个新的请求对象上。
- 接着,http-proxy-middleware 通过创建的 http/https 请求对象,将代理请求发送给目标服务器。
- 目标服务器收到代理请求后,处理该请求并返回响应。
- http-proxy-middleware 接收到目标服务器返回的响应后,将该响应返回给前端应用。
在实现过程中,http-proxy-middleware 还对请求和响应进行了一些处理,比如支持对请求路径的重写、修改请求头、处理响应头等操作,以满足更复杂的代理需求。
总的来说,http-proxy-middleware 利用 Node.js 提供的 http、https 模块,通过创建代理服务器并处理代理请求的方式,实现了请求的转发功能
层层递进。由浅入深。
如果仔细看下来,其实发现Webpack
也不是很难理解,一些羞涩难懂的技术点,只要花点时间去理解,相信很快能攻破,也能明白在实际开发过程中,webpack是怎么代理的,背后的知识点懂了之后,开发过程中也会如翼添虎🐅。
最后,祝君能拿下满意的offer。
我是Dignity_呱,来交个朋友呀,有朋自远方来,不亦乐乎呀!深夜末班车
👍 如果对您有帮助,您的点赞是我前进的润滑剂。