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/'