vue中的proxyTable反向代理(亲测有用)

下面我将为你详细讲解“vue中的proxyTable反向代理(亲测有用)”的攻略。

什么是proxyTable？

proxyTable是vue-cli中用于开发环境的devServer选项的一个配置，可以进行反向代理，实现跨域请求的功能。它可以将本地请求转发到后端API接口进行处理，避免跨域问题和处理复杂的跨域请求头。

proxyTable的配置方式

在vue项目的config文件夹中的index.js文件中可以找到dev选项，可以看到proxyTable选项的默认配置如下：

  dev: {
    // ...
    proxyTable: {}
  }

其中，proxyTable是一个对象，可以通过配置它来进行反向代理。

例如，我们在本地开发时，需要请求接口http://localhost:3000/api，但是由于浏览器同源策略的限制，请求就会失败。这时我们就可以通过配置proxyTable将请求转发到后端API应用中，具体配置如下：

proxyTable: {
  '/api': {
    target: 'http://localhost:3000', // 目标主机
    changeOrigin: true // 将主机头的源更改为目标URL
  }
}

其中的'/api'就是我们本地想要请求的路径，target则是目标主机（后端API接口）的路径，changeOrigin则是将主机头的源更改为目标URL。这样，本地请求/api时就会被代理到http://localhost:3000/api，从而实现跨域请求的功能。

proxyTable的示例

示例一：跨域请求

例如，我们在本地开发时，需要请求接口http://www.example.com/api（假设该接口属于跨域接口），但是由于浏览器同源策略的限制，请求就会失败。这时我们就可以通过配置proxyTable将请求转发到后端API应用中，具体配置如下：

proxyTable: {
  '/api': {
    target: 'http://www.example.com', // 目标主机
    changeOrigin: true // 将主机头的源更改为目标URL
  }
}

然后在代码中发起请求：

axios.get('/api')
     .then(response => console.log(response))

这样，本地请求/api时就会被代理到http://www.example.com/api，从而实现跨域请求的功能。

示例二：本地虚拟数据

有时候我们需要在本地开发时，模拟后端API接口的数据，这时可以通过配置proxyTable来实现。

例如，我们在本地开发时，想要模拟后端API接口的数据，接口路径为http://localhost:3000/api/data，我们可以在本地定义一个虚拟的JSON数据文件，文件路径为mock/data.json，具体内容如下：

{
  "name": "小明",
  "age": 20
}

然后我们就可以在proxyTable中配置本地请求路径和虚拟JSON文件路径的关系，具体配置如下：

proxyTable: {
  '/api/data': {
    target: 'http://localhost:3000', // 目标主机
    changeOrigin: true, // 将主机头的源更改为目标URL
    pathRewrite: {
      '^/api/data': '/mock/data.json' // 路径重写
    }
  }
}

其中，pathRewrite是一个对象，需要指定一个正则表达式和替代路径。'^/api/data'是一个正则表达式，表示以/api/data开头的路径都会被替换为/mock/data.json。这样，当本地请求/api/data时，代理就会将请求转发到本地的虚拟JSON文件中，从而返回我们定义的虚拟数据。

总结

proxyTable是vue-cli中用于开发环境的devServer选项的一个配置，可以进行反向代理，实现跨域请求的功能。它可以将本地请求转发到后端API接口进行处理，避免跨域问题和处理复杂的跨域请求头。我们可以通过示例来更好的理解它的使用。