vue-element-admin 框架调用后端接口及跨域问题

使用vue-element-admin框架调用后端接口及跨域问题

webpack+vue-cil 中proxyTable配置接口地址代理

webpack开发配置API代理解决跨域问题-devServer

vue-element-admin实战（一）修改登陆接口

实例

把访问的接口改为线上的地址（xxx.com）

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      // 解决跨域问题： 当你请求是以/admin开头的接口，则我帮你代理访问到      http://test.hello.com/
      // '/admin/*': {
      //   target: 'http://test.hello.com', // 你接口的域名
      //   // secure: false, // 如果是https接口，需要配置这个参数
      //   changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
      // }
      // ,
      [process.env.VUE_APP_BASE_API]: {
        target: `http://test.hello.com`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    after: require('./mock/mock-server.js')
  },

.env.development文件

VUE_APP_BASE_API = ''

把访问的接口改为本地开发的虚拟主机地址（xxx.local）

vue.config.js文件

devServer: {
    port: port,
    open: true,
    overlay: {
      warnings: false,
      errors: true
    },
    proxy: {
      // change xxx-api/login => mock/login
      // detail: https://cli.vuejs.org/config/#devserver-proxy
      [process.env.VUE_APP_BASE_API]: {
        target: `http://127.0.0.1:${port}/mock`,
        changeOrigin: true,
        pathRewrite: {
          ['^' + process.env.VUE_APP_BASE_API]: ''
        }
      }
    },
    after: require('./mock/mock-server.js')
  },

.env.development文件

VUE_APP_BASE_API = 'http://web.test.local/'