在前后端分離進行開發(fā)時，跨域問題是必然存在的，之前一直使用的谷歌瀏覽器跨域，最近在使用vue-cli進行開發(fā)時，同樣遇到了跨域問題，當(dāng)然設(shè)置谷歌瀏覽器跨域也是可行的，但是vue-cli使用了node等一系列的工具，那合嘗不試試新東西呢。

配置代理：

 找到config目錄下的index.js文件，文件中有這樣一行代碼proxyTable: {}，這是作者給開發(fā)者留下的空缺，用來配置一些代理規(guī)則

  proxyTable: {
        '/api': {
            target: 'http://www.xxx.com', // 你接口的域名
            secure: false,      // 如果是https接口，需要配置這個參數(shù)
            changeOrigin: true,     // 如果接口跨域，需要進行這個參數(shù)配置
            pathRewrite: {        //重寫接口地址
              '^/api': '/'
            }
        }
    }

其中 '/api' 為匹配項，target 為被請求的地址，這樣只要接口地址是以"/api/*"開頭的，都會走代理接口，但是問題來了，我們項目的接口開頭字段不統(tǒng)一，那我們只能手動給每個ajax請求接口前面加上"/api"，如果使用了 axios，可以全局配置一個 baseURL，這樣就不用挨個兒修改 url 了

axios.defaults.baseURL = '/api'

此時我們來看看ajax請求變成什么樣了

設(shè)置代理后的ajax請求

納尼，404了，因為在 ajax 的 url 中加了前綴 '/api'，而原本的接口是沒有這個前綴的，所以需要通過 pathRewrite 來重寫地址，將前綴 '/api' 轉(zhuǎn)為 '/'

proxyTable: {
        '/api': {
            target: 'http://www.xxx.cn', // 你接口的域名
            secure: false,      // 如果是https接口，需要配置這個參數(shù)
            changeOrigin: true,     // 如果接口跨域，需要進行這個參數(shù)配置
            pathRewrite: {        //重寫接口地址
              '^/api': '/'
            }
        }
    }

我們再來看看網(wǎng)絡(luò)請求

重寫地址后的請求

可以看到接口200了，雖然我們加了前綴，但是真實的請求是沒有前綴的。

寫這篇文章只是記錄下自己的學(xué)習(xí)記錄，始終堅信一句話，我們都是站在巨人的肩膀上作代碼的搬運工，沒有什么不可能。