[JavaScript知识库] Vue-cli 解决开发环境的跨域问题详解

开发: C++知识库 Java知识库 JavaScript Python PHP知识库人工智能区块链大数据移动开发嵌入式开发工具数据结构与算法开发测试游戏开发网络协议系统运维
教程: HTML教程 CSS教程 JavaScript教程 Go语言教程 JQuery教程 VUE教程 VUE3教程 Bootstrap教程 SQL数据库教程 C语言教程 C++教程 Java教程 Python教程 Python3教程 C#教程
数码: 电脑笔记本显卡显示器固态硬盘硬盘耳机手机 iphone vivo oppo 小米华为单反装机图拉丁

-> JavaScript知识库 -> Vue-cli 解决开发环境的跨域问题详解 -> 正文阅读

[JavaScript知识库]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配置代理