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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/u010881899/article/details/77479169

当我们前端用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


阅读更多
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页