之前的文章vue項(xiàng)目的跨域設(shè)置，中提到了vue的跨域設(shè)置：
從前端向后臺(tái)請(qǐng)求“/list”這個(gè)地址的時(shí)候，在瀏覽器看到的url前綴是你本地運(yùn)行服務(wù)"localhost:XXXX"，但實(shí)際上春弥，你請(qǐng)求的地址是'http://api.xxxxxxxx.com'
proxyTable: {
'/list': {
target: 'http://api.xxxxxxxx.com',
pathRewrite: {
'^/list': '/list'
}
}
}
當(dāng)我自己寫(xiě)demo實(shí)踐的時(shí)候，發(fā)現(xiàn)報(bào)錯(cuò)了，查閱資料后拯腮，發(fā)現(xiàn)之前的這段代碼應(yīng)該修改為
從前端向后臺(tái)請(qǐng)求“/list”這個(gè)地址的時(shí)候，在瀏覽器看到的url前綴是你本地運(yùn)行服務(wù)"localhost:XXXX/list"蚁飒，但實(shí)際上动壤，你請(qǐng)求的地址是'http://api.xxxxxxxx.com/list'
pathRewrite 中的“'^/list'，可以理解為你請(qǐng)求的地址淮逻，后面的值”/list“琼懊，會(huì)拼接在你的target值得后面，作為實(shí)際請(qǐng)求的地址爬早，對(duì)于上面這個(gè)例子哼丈，當(dāng)你請(qǐng)求“/list”的時(shí)候，瀏覽器中的請(qǐng)求地址是'http://api.xxxxxxxx.com/list'筛严，實(shí)際的請(qǐng)求地址是target的值 + '/list'
以上的例子不是真實(shí)的接口醉旦，那么，我們用一個(gè)真實(shí)的接口測(cè)試一下：
接口名：‘http://ustbhuangyi.com/sell/api’
請(qǐng)求類(lèi)型： 'get'
請(qǐng)求代碼
axios.get('/seller').then((res) => {
可以這樣配置
// 正確示例
也可以這樣配置
// 正確示例
錯(cuò)誤配置,將會(huì)報(bào)404錯(cuò)誤
// 錯(cuò)誤示例
感悟：學(xué)習(xí)理論，不如動(dòng)手敲代碼髓抑，踩完坑咙崎，對(duì)學(xué)習(xí)的理論就有更深的理解了
