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

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對(duì)象下有一個(gè)proxyTable的屬性，這個(gè)參數(shù)主要是一個(gè)地址映射表，可以幫助我們將復(fù)雜的url簡(jiǎn)化。

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

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

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

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

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

如果想要一套代碼兼容開(kāi)發(fā)和生產(chǎn)環(huán)境，避免在開(kāi)發(fā)環(huán)境和生產(chǎn)環(huán)境之間切換時(shí)，頻繁修改接口調(diào)用的代碼。可以作如下判斷：

    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