VUE 設定本地代理

配置proxyTable

在vue-cli專案中的config資料夾下的index.js配置檔案中，找到 proxyTable 的位置：

  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: {},  // 在這兒呢
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }

在vue-cli專案中的config資料夾內新建 proxyConfig.js 檔案：

module.exports = {
    proxy: {
        '/api': {    
            target: 'https://api.douban.com',  // 介面域名
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '^/api': ''   // 因為在 ajax 的 url 中加了字首 '/api'，而原本的介面是沒有這個字首的,所以需要通過 pathRewrite 來重寫地址，將字首 '/api' 轉為 '/'
            }
        }
    }
}

在剛剛開啟的 index.js 檔案中引入 proxyConfig.js 檔案：

var proxyConfig = require('./proxyConfig')

在 proxyTable 位置 寫上 proxyConfig.proxy

  dev: {
    env: require('./dev.env'),
    port: 8080,
    autoOpenBrowser: true,
    assetsSubDirectory: 'static',
    assetsPublicPath: '/',
    proxyTable: proxyConfig.proxy,  // 在這兒呢
    // CSS Sourcemaps off by default because relative paths are "buggy"
    // with this option, according to the CSS-Loader README
    // (https://github.com/webpack/css-loader#sourcemaps)
    // In our experience, they generally work as expected,
    // just be aware of this issue when enabling this option.
    cssSourceMap: false
  }

然後執行命令 npm run dev，這時代理便已經配置好了

跨域問題

代理只是在開發環境（dev）中解決了跨域問題，生產環境中真正部署到伺服器上如果是非同源還是存在跨域問題

前端處理

config/dev.env.js 配置：

module.exports = merge(prodEnv, {
  NODE_ENV: 'development',
  API_HOST:"/api/"  // 開發環境中使用上面配置的代理地址api
})

prod.env.js 配置：

module.exports = {
  NODE_ENV: 'production',
  API_HOST:'https://api.douban.com' //，生產環境下使用介面地址
}

配置好後程式會自動判斷當前是開發還是生產環境，然後自動匹配API_HOST。接下來在元件中我們就可以通過process.env.API_HOST 使用地址

this.$axios.get(process.env.API_HOST+"v2/movie/top250?count=20",null).then(function(res){
                (res.status === 200) &&  (that.articles = res.data.subjects)
            });

後端處理

後端伺服器配置允許cros跨域，即access-control-allow-origin：*允許所有訪問的意思。
（此方法ie9及以下不好使。可使用 nginx 反向代理,一勞永逸 <– 線上環境可以用這個）

本地通過修改hosts檔案實現域名本地解析

檔案路徑一般是C:\Window\System32\drivers\etc，開啟 hosts 檔案，在後面加入下面內容：

192.168.15.30  https://api.douban.com