本文共 1399 字，大约阅读时间需要 4 分钟。

Webpack Proxy

Webpack 提供了一个代理服务，即将客户端发送的请求转发至其他服务器。这种代理机制特别适用于解决开发模式下的跨域问题。

webpack-dev-server

Webpack官方推出的 webpack-dev-server 为开发者提供了一个集成了自动编译、自动刷新等功能的开发服务器，仅适用于开发阶段。

在 webpack 配置文件中，ø通过 devServer 属性配置开发服务器。配置示例如下：

const path = require('path')
module.exports = {
  // ...其余配置
  devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: true,
    port: 8080,
    proxy: {
      '/api': {
        target: 'https://api.github.com',
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

Proxy 配置详解

devServer 中的 proxy 属性用于定义请求代理规则。每个规则包含以下配置：

例如配置可以非常灵活：

proxy: {
  '/api/': {
    target: 'http://www.example.org',
    changeOrigin: true
  },
  '/v1/': {
    target: 'http://internal.api'
  }
}

工作原理

Webpack Proxy 的核心逻辑基于 http-proxy-middleware 命令行工具，可以轻松在 Express 中实现请求代理。例如：

const express = require('express');
const proxy = require('http-proxy-middleware');
const app = express();
app.use('/api', proxy({
  target: 'http://www.example.org',
  changeOrigin: true
}));
app.listen(8080);

跨域问题

在开发环境中，Webpack Dev Server 启动一个独立于后端服务的本地服务器。由于浏览器的同源策略，直接从本地发送跨域请求会受限。通过启用 Proxy 服务，浏览器实际发送请求的是开发服务器，而非目标服务器。只需将请求转发给目标服务器，浏览器完全无所谓后续请求的具体路由。

这种方式允许我们在本地开发时无缝使用各类后端服务，同时也避免了各种跨域问题。

!!! 注意：不要直接复制参考文献中的内容，可适当重新表达。