vue element admin cross-domain issues

The method I used before can’t get past life and death, so I almost gave up, but fortunately, it was solved successfully in the end~

---

1. Previously used and effective methods

Configure in vue.config.js, the specific configuration location is as follows:

devServer: {
    port: port,
    open: true,
    overlay: {
    warnings: false,
    errors: true
  },
  // 新增开始，注意是proxy，不在是proxyTable
  proxy: { 
      // 对应.env.development里的VUE_APP_BASE_API
      [process.env.VUE_APP_BASE_API]: { 
      // 需要跨域的域名，对应.env.development里的VUE_APP_BASE_DOMAIN
      target: process.env.VUE_APP_BASE_DOMAIN,
      // 必须加上这个才能跨域请求，不记得当时是否测试过一定要加
      changeOrigin: true,
      pathRewrite: {
        ['^' + process.env.VUE_APP_BASE_API]: ''
      }
    }
  }
  // 新增结束
  // before: require('./mock/mock-server.js') // 模拟数据注销掉
},

2. Now realize the global proxy cross-domain proxy

Step1, configure.env.development

Declare a global variable VUE_APP_BASE_DOMAIN = ' http://xxx.com' is the backend domain name

# base api
VUE_APP_BASE_API = '/wapi'
BACKGROUND_APPLICATION_URL = 'http://www.xxx.com'

Step2, configure vue.config.js

Create a new proxy object under devServer as follows, it's as simple as that:

devServer: {
  port: port,
  open: true,
  overlay: {
    warnings: false,
    errors: true
  },
  proxy: {
    '/wapi': {
      target: process.env.BACKGROUND_APPLICATION_URL
    }
  },
  // 注释掉mock虚拟请求
  // before: require('./mock/mock-server.js')
},