本文共 1247 字，大约阅读时间需要 4 分钟。
在前后端分离项目中，前端应用和后端API服务器通常运行在不同的主机上。为了方便开发，前端开发环境下可以通过代理将API请求转发到后端API服务器。以下是使用vue.config.js中devServer.proxy选项实现API请求代理的详细说明。
在vue.config.js文件中，可以通过devServer.proxy选项配置API请求的代理规则。以下是一个典型的配置示例：
module.exports = { devServer: { host: '0.0.0.0', port: 2000, open: true, proxy: { '/api': 'http://localhost:3000' } }} 如果需要将代理路径重写为不带"/api"的形式，可以在配置中添加pathRewrite选项。例如：
module.exports = { devServer: { host: '0.0.0.0', port: 2000, open: true, proxy: { '/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '' } } }, disableHostCheck: true }} 默认情况下，代理请求会保留源主机头信息。在某些场景下，可能需要覆盖源主机头信息，可以通过changeOrigin选项实现：
module.exports = { devServer: { host: '0.0.0.0', port: 2000, open: true, proxy: { '/api': { target: 'http://localhost:3000', pathRewrite: { '^/api': '' }, changeOrigin: true } }, disableHostCheck: true }} 请求路径显示：在浏览器网络调试工具中，请求路径仍会显示原始路径（如http://localhost:2000/api/users），但实际请求会被代理到目标路径（如http://localhost:3000/api/users）。
路径匹配规则：只要请求路径以"/api"开头，代理请求会正常处理。路径后面的内容会被完整保留。
在实际项目中，确保目标服务器地址和端口配置正确，并结合项目需求选择合适的代理规则和重写策略。通过以上配置，可以轻松实现前端与后端API服务器之间的请求代理，提升开发效率。
转载地址：http://yryr.baihongyu.com/