本文详解 webpack-dev-server 中 proxy 的配置方法，涵盖单路径代理、多路径合并、路径重写、忽略SSL验证及条件绕过等五种常用场景。同时解析 changeOrigin 参数在解决开发环境跨域中的原理，并提供 Vue CLI 配置示例及完整参数说明，帮助开发者高效处理前后端分离开发中的接口请求问题。
Webpack-dev-server 代理配置详解
前言
当存在独立的后端开发服务器 API，且希望在前端同域名下发送 API 请求时，通过代理某些 URL 可以简化开发流程。
这种方式能有效解决开发环境中的跨域问题，无需额外配置 nginx 或修改 host 文件，极大提升了开发体验。
需要在 webpack.config.js 文件中进行相关配置。
以下简要介绍五种常见的代理使用场景。
五种常用代理场景
场景一：基础路径代理
mmodule.exports = {
//...
devServer: {
proxy: {
'/api': 'http://localhost:3000'
}
}
};
配置后，请求 /api/xxx 将被代理至 http://localhost:3000/api/xxx。例如，访问 /api/user 时，实际请求将转发至 http://localhost:3000/api/user。
场景二：多路径合并代理
若需将多个不同路径代理至同一个目标地址，可使用包含 context 属性的对象数组进行配置。
module.exports = {
//...
devServer: {
proxy: [{
context: ['/auth', '/api'],
target: 'http://localhost:3000',
}]
}
};
场景三：路径重写
如果希望代理时不保留 /api 前缀，可通过配置路径重写来实现。
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: {'^/api' : ''}
}
}
}
};
此时，请求 /api/xxx 将被代理至 http://localhost:3000/xxx。例如，访问 /api/user 时，实际请求将转发至 http://localhost:3000/user。
场景四：忽略 SSL 验证
默认情况下，webpack-dev-server 不接受运行在 HTTPS 上且使用无效证书的后端服务器。若需接受此类请求，只需将 secure 设置为 false。
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'https://other-server.example.com',
secure: false
}
}
}
};
场景五：条件绕过代理
有时无需代理所有请求，可基于函数的返回值来绕过代理逻辑。
在 bypass 函数中，可以访问请求体、响应体及代理选项。若需跳过代理请求，必须返回 false 或新的路径字符串。
例如，对于浏览器请求希望返回 HTML 页面，而对 API 请求保持代理，可按如下方式配置。
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
bypass: function(req, res, proxyOptions) {
if (req.headers.accept.indexOf('html') !== -1) {
console.log('Skipping proxy for browser request.');
return '/index.html';
}
}
}
}
}
};
跨域处理原理与 Vue CLI 示例
跨域处理原理
上述配置列表中的 changeOrigin 参数为布尔值。将其设置为 true 时，本地会虚拟一个服务器接收请求并代为发送，从而修改主机头部的原点为目标 URL，解决跨域限制。
module.exports = {
//...
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
}
}
}
};
Vue CLI 中 proxyTable 配置接口地址代理示例
需修改 config/index.js 文件。
module.exports = {
dev: {
// 静态资源文件夹
assetsSubDirectory: 'static',
// 发布路径
assetsPublicPath: '/',
// 代理配置表，在这里可以配置特定的请求代理到对应的API接口
// 使用方法：https://vuejs-templates.github.io/webpack/proxy.html
proxyTable: {
// 例如将'localhost:8080/api/xxx'代理到'https://wangyaxing.cn/api/xxx'
'/api': {
target: 'https://wangyaxing.cn', // 接口的域名
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
},
// 例如将'localhost:8080/img/xxx'代理到'https://cdn.wangyaxing.cn/xxx'
'/img': {
target: 'https://cdn.wangyaxing.cn', // 接口的域名
secure: false, // 如果是https接口，需要配置这个参数
changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
pathRewrite: {'^/img': ''} // pathRewrite 来重写地址，将前缀 '/api' 转为 '/'。
}
},
// Various Dev Server settings
host: 'localhost', // can be overwritten by process.env.HOST
port: 4200, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
}其他可用参数说明
其他可用参数说明
dev-server 底层使用了强大的 http-proxy-middleware，该中间件基于 node-http-proxy 实现。可查阅 http-proxy 的源码和文档以获取更多信息：https://github.com/nodejitsu/node-http-proxy。
- target：需使用 url 模块解析的 URL 字符串。
- forward：需使用 url 模块解析的 URL 字符串，用于正向代理。
- agent：需传递给 http(s).request 的对象（参考 Node 的 https 代理和 http 代理对象配置）。
- ssl：需传递给 https.createServer() 的对象。
- ws：true 或 false，指定是否代理 WebSocket 连接。
- xfwd：true 或 false，指定是否添加 x-forwarded 标头。
- secure：true 或 false，指定是否验证 SSL 证书。
- toProxy：true 或 false，指定是否将绝对 URL 作为路径传递（适用于代理代理场景）。
- prependPath：true 或 false，默认值为 true，指定是否将目标路径添加到代理路径中。
- ignorePath：true 或 false，默认值为 false，指定是否忽略传入请求的代理路径（注意：如需使用，必须手动附加 /）。
- localAddress：指定为传出连接绑定的本地接口字符串。
- changeOrigin：true 或 false，默认值为 false，将主机标头的原点更改为目标 URL。
参考资源
官方文档 http-proxy-middleware node-http-proxy API Proxying During Development
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持本站。