在前后端分離進(jìn)行開發(fā)時(shí)榜旦，跨域問題是必然存在的幽七，之前一直使用的谷歌瀏覽器跨域，最近在使用vue-cli進(jìn)行開發(fā)時(shí)溅呢，同樣遇到了跨域問題澡屡，當(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, // 如果接口跨域踏兜，需要進(jìn)行這個參數(shù)配置
pathRewrite: { //重寫接口地址
'^/api': '/'
}
}
}
其中 '/api' 為匹配項(xiàng)词顾，target 為被請求的地址，這樣只要接口地址是以"/api/*"開頭的碱妆，都會走代理接口肉盹，但是問題來了，我們項(xiàng)目的接口開頭字段不統(tǒng)一疹尾，那我們只能手動給每個ajax請求接口前面加上"/api"上忍，如果使用了 axios，可以全局配置一個 baseURL纳本，這樣就不用挨個兒修改 url 了
axios.defaults.baseURL = '/api'
此時(shí)我們來看看ajax請求變成什么樣了
設(shè)置代理后的ajax請求
納尼窍蓝，404了，因?yàn)樵?ajax 的 url 中加了前綴 '/api'繁成，而原本的接口是沒有這個前綴的吓笙，所以需要通過 pathRewrite 來重寫地址，將前綴 '/api' 轉(zhuǎn)為 '/'
proxyTable: {
'/api': {
target: 'http://www.xxx.cn', // 你接口的域名
secure: false, // 如果是https接口巾腕，需要配置這個參數(shù)
changeOrigin: true, // 如果接口跨域面睛，需要進(jìn)行這個參數(shù)配置
pathRewrite: { //重寫接口地址
'^/api': '/'
}
}
}
我們再來看看網(wǎng)絡(luò)請求
重寫地址后的請求
可以看到接口200了絮蒿，雖然我們加了前綴，但是真實(shí)的請求是沒有前綴的叁鉴。
寫這篇文章只是記錄下自己的學(xué)習(xí)記錄土涝，始終堅(jiān)信一句話，我們都是站在巨人的肩膀上作代碼的搬運(yùn)工幌墓，沒有什么不可能但壮。
