Vue-cli 解决开发环境的跨域问题详解

一、vue-cli 2.x使用proxyTable进行配置

index.js中添加proxyTable配置：

dev: {
    env: require('./dev.env'),
    port: 7318, //前端端口号
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    // '/api' 为匹配项
    pathRewrite 来重写地址，将前缀 '/api' 转为 ''
    // 如果本身的接口地址就有 '/api' 这种通用前缀，就可以把 pathRewrite 删掉
    proxyTable: {
      '/api': {
        target: 'http://localhost:7316/api/eurekacmis/v1',  // 测试
        // target: '',  // 正式
        changeOrigin: true,
        pathRewrite: {
          '^/api': '',  // 路径重写,
        }
      }
    },
    cssSourceMap: false
  }

参照网址：逐步解决并理解vue-cli中 proxyTable 配置无效,访问404_大唐锦绣的博客-CSDN博客

2.vue-cli 3.x、4.x使用devServer进行设置

在项目根目录下 创建vue.config.js文件 注：此文件跟src是同级路径而不是包含关系

module.exports={
  // 部署应用时的基本url
  publicPath:"",
  // 打包构建应用的文件夹
  outputDir:"dist",
  // 打包时存放静态资源的文件夹，js/img/css
  assetsDir:"static",
  // 指定生成的index文件
  indexPath:"index.html",
  // 配置请求代理
  devServer:{
    port: 3000, //前端端口号设置
    proxy:{
      "/api":{
        target:"http://localhost:3000",
        ws:true,
        // 是否允许跨域
        changeOrigin:true
      }
    }
  }
}

参照网址：vue中的axios的webpack配置代理以及二次封装_尐_的博客-CSDN博客_vue webpack配置代理