Webpack中的proxy

1.前言

webpack-dev-server提供了一个proxy功能，可以帮助开发者在本地开发时解决跨域问题。要理解其工作原理以及为什么可以解决跨域问题，首先我们需要了解两个关键概念：跨域问题 和 代理的工作方式。

2.跨域问题的本质

跨域问题是浏览器的同源策略引起的。浏览器会限制从一个源（协议、域名、端口）发起的请求访问另一个源的资源。具体来说，以下任意一项不同都被认为是跨域：

• 协议（如http://和https://）
• 域名（如example.com和api.example.com）
• 端口（如http://localhost:3000和http://localhost:8000）

在前端开发中，通常会遇到这种情况：前端应用运行在http://localhost:8080，而后端API服务器运行在 http://localhost:3000。由于端口不同，它们被认为是不同的源，直接请求后端 API 会触发跨域问题。

3.webpack proxy的工作原理

webpack-dev-server提供的proxy功能通过代理服务器的形式绕过了浏览器的同源策略。其工作原理可以简单描述为：

• 请求拦截：当浏览器向开发服务器（如http://localhost:8080）发送请求时,webpack-dev-server会检查该请求的路径是否符合代理规则。
• 请求转发：如果符合代理规则，webpack-dev-server会将该请求转发（代理）到目标服务器（如 http://localhost:3000）。从浏览器的角度来看，它的所有请求都还是发往http://localhost:8080，所以不会触发跨域问题。
• 响应回传：目标服务器（如后端 API）接收到请求后，处理并返回响应。webpack-dev-server代理服务器收到响应后，将其再转发给浏览器。整个过程对浏览器是透明的，浏览器并不知道请求实际上是由代理服务器转发的。

通过这种方式，浏览器只与webpack-dev-server通信，而不是直接与后端服务器通信，因此避免了跨域限制。

4.为什么能解决跨域问题

通过代理的方式，webpack-dev-server使浏览器始终认为它是在与同源的服务器（即localhost:8080）进行通信，而实际的请求是在服务器端完成的跨域。因为跨域请求发生在服务器端，而不是浏览器端，服务器之间的通信没有同源策略的限制，所以可以正常请求不同源的资源。

5.配置示例

一个典型的proxy配置如下：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000',
        changeOrigin: true,
        pathRewrite: { '^/api': '' },
      },
    },
  },
};

• /api：匹配所有以/api开头的请求路径。
• target：指向目标服务器地址（如http://localhost:3000）。
• changeOrigin：设置为true后，代理服务器会修改请求头中的 Host 字段，使其与目标服务器一致。
• pathRewrite：重写路径规则，这里将/api去掉，使得请求路径与目标服务器匹配。

6.总结

webpack-dev-server的proxy通过在开发服务器上代理请求，将前端发向开发服务器的请求转发给后端实际的API服务器，从而避免了浏览器的同源策略限制，解决了跨域问题。代理的本质是浏览器只与同源的服务器通信，而跨域请求则由服务器进行，绕过了浏览器的跨域安全限制。