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

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

开发环境API代理设置

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

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

// config/index.jsmodule.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.jsmodule.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