當(dāng)前端工程師搭建好頁面開始與后端進(jìn)行聯(lián)調(diào)時，總是會面對跨域的問題：

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8080' is therefore not allowed access.”

解決辦法：

進(jìn)入你的vue項(xiàng)目下 -> config -> index.js，里面的dev對象下有一個proxyTable的屬性，這個參數(shù)主要是一個地址映射表，可以幫助我們將復(fù)雜的url簡化。

如要請求的地址是api.xxx.com/list/1，可以對proxyTable進(jìn)行如下配置：

    proxyTable: {
        '/list': {
        target: 'http://api.xxx.com',
        pathRewrite: {
          '^/list': '/list'
        }
      }
    }

如此一來就可以用/list/1來代替http://api.xxx.com/1。

那么又是如何解決跨域問題的呢？其實(shí)在上面的'list'的參數(shù)里有一個changeOrigin參數(shù)，接收一個布爾值，如果設(shè)置為true,那么本地會虛擬一個服務(wù)端接收你的請求并代你發(fā)送該請求，這樣就不會有跨域問題了，當(dāng)然這只適用于開發(fā)環(huán)境。增加的代碼如下所示：

    proxyTable: {
      '/list': {
        target: 'http://api.xxxxxxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/list': '/list'
        }
      }
    }

如果想要一套代碼兼容開發(fā)和生產(chǎn)環(huán)境，避免在開發(fā)環(huán)境和生產(chǎn)環(huán)境之間切換時，頻繁修改接口調(diào)用的代碼?？梢宰魅缦屡袛啵?/p>

    let urlApi = ''
    let url = window.location.href
    if(url.indexOf('8080') > -1){
        urlApi = '/list/1/xxx'
    }else{
        urlApi = 'http://api.xxxxxxxx.com/1/xxx'
    }

參考文檔：https://vuejs-templates.github.io/webpack/proxy.html