Vue之proxyTable代理超全面配置流程

概述

Vue.js 是一个构建数据驱动的 web 界面的渐进式框架，使用 Vue 开发前端项目时，经常遇到需要向后端接口发起 HTTP 请求的情况。由于前端和后端常常处于不同的服务器上，因此需要解决跨域的问题。本文将介绍在 Vue 项目中使用 proxyTable 进行接口代理的配置流程。

步骤

步骤一：在webpack配置文件中进行proxyTable的配置

Vue CLI 生成的项目通常使用的是 webpack 对前端资源进行打包和构建。我们需要在项目根目录下找到 build/webpack.dev.conf.js 文件，在这个文件中增加代理配置。示例代码如下：

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8888',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    // ...
  }
}

/api：表示匹配到以 /api 开头的请求路径（例如 /api/user）
target：设置目标服务器的地址，这里表示代理到本地 8888 端口
changeOrigin：是否改变源端口号，例如本地开发时需要将请求发送到服务器（target指定）的/api路径上，那么需要将此项设置为 true，否则设置为 false
pathRewrite：用于将匹配到的路径重写，这里表示将 /api 重写为 ''（空字符串）

步骤二：在前端代码中发起请求

经过了代理配置，我们在前端页面中发起请求的时候，只需要将请求发到代理服务器的地址上就行了，例如：

axios.get('/api/user').then((res) => {
  // ...
})

这样的方式，请求会被代理服务器转发到目标服务器的 /user 路径。在前端代码中，我们只需要关心请求到的是 /api 路径上的资源，而对于跨域问题的解决，全部交给了代理服务器去处理。

常见问题

1. 代理服务器和目标服务器都在同一个地方，是否也需要进行代理设置？

在同一台机器上的前端和后端代码使用代理服务器进行请求的话，这种情况下，是没有必要进行代理设置的。可以直接使用接口路径进行请求，这种情况下不会存在跨域问题。

2. 代理服务器和目标服务器不在同一个地方，如何解决证书问题？

在开发中，使用的证书通常是自签名的，在代理服务器上进行转发时可能会出现证书问题导致请求被错误拦截。此时，需要在代理服务器上添加以下代码：

httpsAgent: new https.Agent({
  rejectUnauthorized: false
})

示例代码：

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://www.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
        httpsAgent: new https.Agent({
          rejectUnauthorized: false
        })
      }
    },
    // ...
  }
}

这样就可以设置代理服务器不验证 SSL 证书。

示例说明

示例一：代理服务器和目标服务器位于同一个主机

假设代理服务器部署在 localhost 的 3000 端口，目标服务器部署在 localhost 的 8888 端口，我们可以采用以下配置：

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8888',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    },
    // ...
  }
}

这样，在前端代码中，只需要将请求发往代理服务器即可：

axios.get('/api/user').then((res) => {
  // ...
})

示例二：代理服务器和目标服务器不在同一台机器

假设代理服务器部署在 localhost 的 3000 端口，目标服务器部署在外网，我们可以采用以下配置：

module.exports = {
  // ...
  devServer: {
    proxy: {
      '/api': {
        target: 'https://www.example.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        },
        httpsAgent: new https.Agent({
          rejectUnauthorized: false
        })
      }
    },
    // ...
  }
}