vue element admin 跨域問題

jrue發表於2021-12-31
Vue跨域

之前用的方法現在死活跨不過去，都快放棄，好在最後成功解決了~

1.以前使用並有效的方法

在vue.config.js裡配置，具體配置位置如下：
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.現在實現全域性代理跨域proxy

Step1，配置.env.development

宣告一個全域性變數VUE_APP_BASE_DOMAIN = 'http://xxx.com' 為後臺的域名

# base api
VUE_APP_BASE_API = '/wapi'
BACKGROUND_APPLICATION_URL = 'http://www.xxx.com'
Step2，配置 vue.config.js

在devServer下新建proxy物件如下，就是這麼簡單：

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')
},

相關文章