本文介绍在 Webpack 开发环境中，如何通过 devServer 配置代理来解决前端跨域请求问题。详细说明了在 webpack.config.js 中设置 proxy 对象的方法，包括 target、changeOrigin 和 pathRewrite 参数的具体用法，并解释了其底层依赖 http-proxy-middleware 插件的原理。
Webpack 开发环境代理配置指南
撰写本文的初衷
在近期的开发工作中，遇到了若干必须通过代理机制才能解决的技术障碍。为了便于日后回顾与查阅，特此整理记录相关经验。
引入代理的必要性
跨域访问限制
在本地开发阶段，前端应用通常运行在 http://localhost 环境下。若后端接口位于其他域名或端口，直接请求会触发浏览器的同源策略限制，导致跨域错误。虽然 JSONP 和 Nginx 反向代理也是常见的解决方案，但使用代理是解决此类开发环境跨域问题的有效手段之一。
代理配置实施步骤
代理配置实施步骤
Webpack 配置方法
以下配置基于典型的开发环境设置。
- 定位项目根目录下的 webpack.config.js 配置文件。
- 在配置文件的 devServer 对象内部，添加如下代理配置代码：
proxy: {
'/index':{ // 这个是你要替换的位置
/** 比如你要讲http://localhost:8080/index/xxx 替换成 http://10.20.30.120:8080/sth/xxx
* 那么就需要将 index 前面的值替换掉, 或者说是替换掉根地址,
*你可能发现了index也是需要替换的, 没错, 我会在后续操作中处理.
*/
target: 'http://10.20.30.120:8080'//这个是被替换的目标地址
changeOrigin: true // 默认是false,如果需要代理需要改成true
pathRewrite:{
'^/index' : '/' //在这里 http://localhost:8080/index/xxx 已经被替换成 http://10.20.30.120:8080/
}}
}
// 然后在你发起请求的js文件中的地址需要忽略http://10.20.30.120:8080/
//比如 demo.js
axios.post({
url:'http://10.20.30.120:8080/sth/xxx'// 需要替换成下面的地址
url:'/sth/xxx'
}
)
底层实现原理
底层实现原理
该代理功能实际上依赖于 http-proxy-middleware 插件实现。该插件负责拦截前端请求并重定向至目标服务器，具体实现细节可查阅相关文档，此处不再赘述。
以上内容涵盖了 Webpack 代理配置的核心要点，希望对读者有所帮助，欢迎继续支持本站获取更多技术分享。