vue服务器代理proxyTable配置如何解决跨域

Vue是一个基于MVVM架构的前端框架，可以提高开发效率，并且易于维护和扩展。在Vue中，如果请求的资源与当前域名不一致，就会产生跨域问题。这个问题可以通过代理服务器(proxy)来解决。

在Vue中，可以通过webpack-dev-server提供的devServer配置项来配置服务器代理。

代理服务器(proxy)是指一个中间服务器，充当客户端和目标服务器之间的桥梁，客户端通过代理服务器向目标服务器发出请求，代理服务器再将请求转发给目标服务器，并将目标服务器的响应返回给客户端。在这个过程中，客户端与目标服务器之间不存在跨域问题。

接下来，我们详细讲解Vue服务器代理(proxyTable)配置的完整攻略，并提供两个示例说明。

配置方式

Vue服务器代理(proxyTable)配置的方式如下：

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {  //请求的地址以api开头时转发到代理服务器
        target: 'http://localhost:3000',  //代理服务器地址
        changeOrigin: true,  //允许跨域
        pathRewrite: {
          '^/api': '' //url去掉前缀，仅针对api做代理
        }
      }
    }
  }
}

如上所示，我们在vue.config.js中的devServer配置中添加了proxy选项。其中，/api表示请求的地址以/api开头时，才需要转发到代理服务器。target表示代理服务器的地址，这里是http://localhost:3000。changeOrigin选项设置为true，表示允许跨域。pathRewrite用于重写转发的url，这里用一个空字符串代替了/api，仅针对被代理的api做代理转发。

示例一

在一般实际项目中，我们通常把前端放在一个单独的端口，比如localhost:8080，然后把所有API请求转发到后端服务器，比如localhost:3000。

假设我们要向http://localhost:3000/api/getData这个地址发送请求，由于和当前域名不同，就会遇到跨域问题。Vue服务器代理(proxyTable)可以通过如下的方式解决：

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {  //请求的地址以api开头时转发到代理服务器
        target: 'http://localhost:3000',  //代理服务器地址
        changeOrigin: true,  //允许跨域
        pathRewrite: {
          '^/api': '' //url去掉前缀，仅针对api做代理
        }
      }
    }
  }
}

上述配置中将请求的地址以/api开头的请求转发到代理服务器http://localhost:3000，用空字符串代替了/api，请求本身并不会变，因此可以成功获取到数据，并避免了跨域问题。

示例二

假设我们需要请求一个跨域的API地址如：http://www.example.com/getData，这个API地址提供了一个post方法。

<template>
  <div>
    <button @click="getData">点击获取数据</button>
  </div>
</template>

<script>
export default {
  methods: {
    async getData() {
      try {
        const res = await axios.post('http://www.example.com/getData', {  //跨域请求
          data: 'hello world'
        })
        console.log(res.data)
      } catch (err) {
        console.error(err)
      }
    }
  }
}
</script>

由于http://www.example.com/getData和当前域名不同，会遇到如下错误提示：

Access to XMLHttpRequest at 'http://www.example.com/getData' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

这个错误提示告诉我们当前域名(http://localhost:8080)无法访问http://www.example.com，因此需要Vue服务器代理(proxyTable)来处理跨域问题，配置如下：

// vue.config.js

module.exports = {
  devServer: {
    proxy: {
      '/api': {  //请求的地址以api开头时转发到代理服务器
        target: 'http://www.example.com',  //代理服务器地址
        changeOrigin: true,  //允许跨域
        pathRewrite: {
          '^/api': '' //url去掉前缀，仅针对api做代理
        }
      }
    }
  }
}

上述配置将请求的地址以/api开头的请求转发到代理服务器http://www.example.com，用空字符串代替了/api，请求本身并不会变，因此可以成功获取到跨域数据，并避免了跨域问题。