新版本vue-element-admin调用后端接口和跨域

1. vue-element-admin版本

{
  "name": "vue-element-admin",
  "version": "4.4.0",
  ...
}

2. 修改.env.development

将VUE_APP_BASE_API中内容改为空

# just a flag
ENV = 'development'

# base api
VUE_APP_BASE_API = ''

3. 修改vue.config.js

移除mock

// before: require('./mock/mock-server.js')

使用proxy跨域，在target中填写地址

proxy: {
  [process.env.VUE_APP_BASE_API]: {
    target: `要跨域的地址`,
    changeOrigin: true,
    ws: true,
    secure: false,
    pathRewrite: {
      ['^' + process.env.VUE_APP_BASE_API]: ''
    }
  }
}

从Chrome浏览器的Network中查看，请求依然是从原地址http://localhost:9528/中发出的，这是因为vue-element-admin提供的代理服务器帮你转发到了target中跨域的地址，这个对于浏览器是不透明的，所以浏览器只知道数据来自http://localhost:9528/，也就不认为有跨域的问题了。

4. 配置接口请求头

\src\utils\request.js

service.interceptors.request.use(
  config => {
    if (store.getters.token) {
      // 在这里自定义请求头
      config.headers['headerUserName'] = getToken()
    }
    return config
  },
  error => {
    // do something with request error
    console.log(error) // for debug
    return Promise.reject(error)
  }
)