说说webpack proxy工作原理？为啥能解决跨域

Posted 2023-03-23

参考技术A

webpack proxy ，即 webpack 提供的代理服务

基本行为就是接收客户端发送的请求后转发给其他服务器

其目的是为了便于开发者在开发模式下解决跨域问题（浏览器安全策略限制）

想要实现代理首先需要一个中间服务器， webpack 中提供服务器的工具为 webpack-dev-server

webpack-dev-server 是 webpack 官方推出的一款开发工具，将自动编译和自动刷新浏览器等一系列对开发友好的功能全部集成在了一起

目的是为了提高开发者日常的开发效率， 只适用在开发阶段

关于配置方面，在 webpack 配置对象属性中通过 devServer 属性提供，如下：

devServetr 里面 proxy 则是关于代理的配置，该属性为对象的形式，对象中每一个属性就是一个代理的规则匹配

属性的名称是需要被代理的请求路径前缀，一般为了辨别都会设置前缀为 /api ，值为对应的代理匹配规则，对应如下：

proxy 工作原理实质上是利用 http-proxy-middleware 这个 http 代理中间件，实现请求转发给其他服务器

举个例子：

在开发阶段，本地地址为 http://localhost:3000 ，该浏览器发送一个前缀带有 /api 标识的请求到服务端获取数据，但响应这个请求的服务器只是将请求转发到另一台服务器中

在开发阶段， webpack-dev-server 会启动一个本地开发服务器，所以我们的应用在开发阶段是独立运行在 localhost 的一个端口上，而后端服务又是运行在另外一个地址上

所以在开发阶段中，由于浏览器同源策略的原因，当本地访问后端就会出现跨域请求的问题

通过设置 webpack proxy 实现代理请求后，相当于浏览器与服务端中添加一个代理者

当本地发送请求的时候，代理服务器响应该请求，并将请求转发到目标服务器，目标服务器响应数据后再将数据返回给代理服务器，最终再由代理服务器将数据响应给本地

在代理服务器传递数据给本地浏览器的过程中，两者同源，并不存在跨域行为，这时候浏览器就能正常接收数据

注意： 服务器与服务器之间请求数据并不会存在跨域行为，跨域行为是浏览器安全策略限制

webpack配置proxy反向代理，解决跨域问题

参考技术A webpack官网

此时访问的接口地址在本地被解析为 localhost:8080/api/***

访问的真实地址是 http://192.168.0.111:9999***

在 http://192.168.0.111:9999 上有后端服务的话，你可以这样启用代理：

请求到 /api/users 现在会被代理到请求 http://192.168.0.111:9999/api/users 。

如果你不想始终传递 /api ，则需要重写路径：

默认情况下，不接受运行在 HTTPS 上，且使用了无效证书的后端服务器。如果你想要接受，修改配置如下：

如果你想要代理多个路径特定到同一个 target 下，你可以使用由一个或多个「具有 context 属性的对象」构成的数组：