vue项目配置文件vue.config.js中devServer.proxy 使用说明-白红宇

vue项目配置文件vue.config.js中devServer.proxy 使用说明

阅读量：353 次

发布时间：2019-03-04

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

在前后端分离项目中，前端应用和后端API服务器通常运行在不同的主机上。为了方便开发，前端开发环境下可以通过代理将API请求转发到后端API服务器。以下是使用vue.config.js中devServer.proxy选项实现API请求代理的详细说明。

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配置

默认情况下，代理请求会保留源主机头信息。在某些场景下，可能需要覆盖源主机头信息，可以通过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/

你可能感兴趣的文章

NullPointerException Cannot invoke setSkipOutputConversion(boolean) because functionToInvoke is null