JavaScript 中怎么使用 Webpack 的 devServer 配置本地开发代理-js教程-PHP中文网

webpack devserver.proxy 是本地开发绕过跨域最轻量方式，支持单路径映射、路径重写、https 自签名证书处理、多路径及条件代理，配置后需重启 dev server 生效。

javascript 中怎么使用 webpack 的 devserver 配置本地开发代理

Webpack 的 devServer.proxy 是本地开发绕过跨域限制最常用、最轻量的方式，不需要额外起服务或改 hosts，直接在 webpack 配置里写几行就能把前端请求转发到后端 API。

基础代理：单路径映射

最常见场景：所有 /api 开头的请求，转发到 http://localhost:3000。

配置写法简洁，适合后端接口统一挂载在 /api 下
前端代码仍调 fetch('/api/user')，实际发到 http://localhost:3000/api/user
注意：目标地址必须带协议（http:// 或 https://）

示例：

webpack.config.js

devServer: {
  proxy: {
    '/api': 'http://localhost:3000'
  }
}

路径重写：去掉前缀再转发

当后端 API 不带 /api 前缀（比如直接是 /user），而你又不想改前端请求路径时，用 pathRewrite 去掉前缀。

^/api 表示匹配开头的 /api，替换为空字符串
fetch('/api/user') → 实际请求 http://localhost:3000/user
正则写法要加引号，且注意转义（^ 是锚点，必须保留）

示例：

webpack.config.js

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      pathRewrite: { '^/api': '' }
    }
  }
}

HTTPS 后端 & 证书问题

如果后端是 HTTPS 地址但用了自签名证书（比如本地开发用的 https://localhost:8081），默认会被拒绝。

Java Maven Code Review

审查Java Maven项目（ZIP压缩包或GitLab仓库URL），检查代码规范、命名、模块边界、可维护性问题以及重复代码。

下载

加 secure: false 允许不校验证书
changeOrigin: true 必须开启，否则 Host 头还是你本地域名，后端可能拒收
这个组合对本地调试 mock 服务或自建 HTTPS 后端很关键

示例：

webpack.config.js

devServer: {
  proxy: {
    '/api': {
      target: 'https://localhost:8081',
      changeOrigin: true,
      secure: false
    }
  }
}

多路径 & 条件代理

一个项目可能同时对接多个服务（登录、主业务、文件上传），或想对 HTML 请求跳过代理（只代理 API）。

用数组 + context 可批量匹配多个路径前缀
用 bypass 函数判断请求类型：比如 accept: text/html 就返回本地页面，不走代理
函数中可读取 req.url、req.headers 做细粒度控制

示例（多路径）：

webpack.config.js

devServer: {
  proxy: [{
    context: ['/auth', '/api', '/upload'],
    target: 'http://localhost:3000',
    changeOrigin: true
  }]
}

示例（跳过 HTML 请求）：

webpack.config.js

devServer: {
  proxy: {
    '/api': {
      target: 'http://localhost:3000',
      bypass: (req) => {
        if (req.headers.accept && req.headers.accept.includes('html')) {
          return '/index.html';
        }
      }
    }
  }
}

配完记得重启 dev server，代理才生效。浏览器控制台 Network 标签页能看到请求 URL 显示为本地地址，但响应来自目标服务器——说明代理已起作用。

Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南