Vue proxyTable 开发环境下前端和后端真实数据对接问题和解决跨域

当我们前端用Vue开发项目的时候，涉及到前端和后台连调真实数据对接会出现很多问题，比如跨域... .我们需要把本地localhost 地址改为线上访问接口数据地址域名，

开发环境API代理设置

当前端与现有后端真实数据集成时，通常需要在使用dev服务器时访问后端API。 为了实现这一点，我们可以并行（或远程）运行dev服务器和API后端，并让dev服务器将所有API请求代理到实际的后端。

要配置代理规则，请在config / index.js中编辑dev.proxyTable选项。 dev服务器正在使用http代理中间件进行代理，因此您应参考其文档以获取详细的用法。 但这是一个简单的例子：

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://test.data.com',
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上面的例子将代理请求 /api/posts/1  到 http://test.data.com

那么又是如何解决跨域问题的呢？其实在上面的'list'的参数里有一个changeOrigin参数，接收一个布尔值，如果设置为true,那么本地会虚拟一个服务端接收你的请求并代你发送该请求，这样就不会有跨域问题了，当然这只适用于开发环境。增加的代码如下所示：

// config/index.js
module.exports = {
  // ...
  dev: {
    proxyTable: {
      // proxy all requests starting with /api to jsonplaceholder
      '/api': {
        target: 'http://test.data.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

网址匹配

除了静态网址之外，您还可以使用glob模式来匹配网址，例如/ API/ **。 有关详细信息，请参阅上下文匹配。 此外，您可以提供一个过滤器选项，该选项可以是自定义函数，用于确定请求是否应被代理：

proxyTable: {
  '*': {
    target: 'http://test.data.com',
    filter: function (pathname, req) {
      return pathname.match('^/api') && req.method === 'GET'
    }
  }
}

具体可以参考https://vuejs-templates.github.io/webpack/proxy.html