VUE-Cli5配置IFrame反向代理

项目结构 

因为项目需求，将项目分成了外侧导航框架与内侧IFrame内容区域，这样在开发过程中，为解决IFrame跨域问题，需要使用反向代理将子页面代理到导航框架中。

导航框架配置代理

const { defineConfig } = require('@vue/cli-service')
const devConfigInfo = require('./development.config')

module.exports = defineConfig({
  ...其他配置项
  devServer: {
    proxy: {
       // IFrame模块1
      '^/modular1': {
        target: 'http://ip:端口/',
        changeOrigin: true
      },
      // IFrame模块2
      '^/modular2': {
        target: 'http://ip:端口/',
        changeOrigin: true
      },
      // 接口
      '/dev-api/base': {
        target: devConfigInfo.baseApi,
        changeOrigin: true,
        pathRewrite: { '^/dev-api': '' }
      }
    }
  }
})

IFrame路径

模块1
<iframe id="iframe2350" src="/modular1/#/子模块路由" style="">
模块2
<iframe id="iframe2350" src="/modular2/#/子模块路由" style="">

内容模块（IFrame）配置代理

内容模块配置代理，主要是配置该模块的请求地址。如果按以下配置则直接会请求导航框架的配置的代理若导航框架没有配置响应的接口反向代理则会出现404。

// 以下是错误示范 
devServer: {
    proxy: {
      '/dev-api/接口地址1': {
        target: devConfigInfo.baseApi,
        changeOrigin: true,
        pathRewrite: { '^/dev-api': '' }
      },
      '/dev-api/接口地址2': {
        target: devConfigInfo.eBaseApi,
        changeOrigin: true,
        pathRewrite: { '^/dev-api': '' }
      }
    }
  }

正确的配置是这样的，在axios的baseUrl配置如下代码

const service = axios.create({
  baseURL: '/模块1/dev-api',
  // 超时时间 默认20秒
  timeout: 20000,
  withCredentials: true
})

之后再再vue.config.j中配置

 devServer: {
    proxy: {
      '/模块1/dev-api/接口地址1': {
        target: devConfigInfo.baseApi,
        changeOrigin: true,
        pathRewrite: { '^/模块1/dev-api': '' }
      },
      '/模块1/dev-api/接口地址2': {
        target: devConfigInfo.eBaseApi,
        changeOrigin: true,
        pathRewrite: { '^/模块1/dev-api': '' }
      }
    }
  }