iView admin是基於Vue.js，搭配使用iView UI元件庫形成的一套後臺整合解決方案，由TalkingData前端視覺化團隊部分成員開發維護。

我的開發環境：

作業系統：macOS High Sierra 10.13.5

Node.js 版本： v8.9.4 

前端框架：iView-admin2.0，用Webpack4.0 + Vue-cli3.0作為基本開發環境。 訪問地址 http://localhost:8080/

問題描述：

iView-admin 中使用axios訪問服務端由於前端地址和後端地址不同源，所以會出現跨域問題。

呼叫/api/test介面是會返回如下資訊：

Request URL:

http://127.0.0.1:7001/api/test

Request Method:

OPTIONS

Status Code:

405 Method Not Allowed

解決方法：

第一步：

在iView-admin專案主目錄中找到 vue.config.js 檔案，新增配置：

module.exports = {

  baseUrl: BASE_URL,

  chainWebpack: config => {
    config.resolve.alias
      .set('@', resolve('src')) 
      .set('_c', resolve('src/components'))
      .set('_conf', resolve('config'))
  },

  productionSourceMap: false,

  //新增如下配置
  devServer: {
    proxy: {
      '/api': {
        target: 'http://127.0.0.1:7001/',
        changeOrigin: true
      }
    }
  }
}
 

 新增對應的devServer設定

第二步：

找到專案的config目錄下的url.js檔案做如下修改。

import env from './env'



//修改DEV_URL為當前前端網站的地址
const DEV_URL = 'http://localhost:8080/'

const PRO_URL = 'https://produce.com'

export default env === 'development' ? DEV_URL : PRO_URL

重啟iView-admin專案，這樣axios訪問的自己域內的介面地址，就會自動代理到對應的http://127.0.0.1:7001這個服務端地址上。這樣就不會出現跨域問題，可以方便真實情況的除錯。以上方式適用於開發環境中使用。