vue-cli的跨域设置

概述

今天打算快速使用vue-cli建立一个小应用用于测试,使用axios发送http请求,但是遇到了跨域问题,总结了一下,供以后开发时参考,相信对其他人也有用。

vue-cli的跨域设置

在vue.config.js里面的devServer的proxy加入如下设置。

// vue.config.js
const tableauApi = 'https://tableau.proxy.web.yimian.com.cn/';

module.exports = {
  devServer: {
    proxy: {
      '/tableau': {
        target: tableauApi,
        changeOrigin: true,
        pathRewrite: {
          '^/tableau': ''
        },
      },
    },
  },
};

上面的设置表示,把/tableau开头的api代理到https://tableau.proxy.web.yimian.com.cn/,并且去掉/tableau。比如/tableau/test1就会被代理到https://tableau.proxy.web.yimian.com.cn/test1

这里底层使用的是http-proxy-middleware插件。

后续

  1. 上面的设置中有devServer,表示只能在开发环境中使用代理,而打包之后就无效了。打包之后需要使用nginx进行反向代理才行。
  2. 上传到静态服务器上面之后有一个路径问题,需要用publicPath给js, css等文件的路径添加前缀,我自己的设置如下:
// vue.config.js
module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ?
    '/test/tableau/dist/':
    '/'
};
上一篇:【Talend & Tableau & Alteryx研讨会】“ 数据和分析战略驱动未来” 技术研讨会


下一篇:数据可视化 Tableau Echarts Illustrator