知識(shí)點(diǎn)
- 發(fā)送ajax常用的一些技術(shù)
- xhr: new XMLHttpRequest()
- fetch(和xhr平級(jí)挽封,IE兼容性差)
- jquery封裝xhr(如$.post,$.get等)
- axios封裝xhr
-
協(xié)議、主機(jī)名、端口扶踊、任意不同即為跨域‰瘢跨域請(qǐng)求是發(fā)出去了铜秆,只是拿不到而已。(1:cors, 2:jsonp只能解決get請(qǐng)求抓韩,利用script標(biāo)簽在引入外部資源不受同源限制的策略 3:利用代理服務(wù)器)
image.png - public文件夾相當(dāng)于8080這臺(tái)服務(wù)器的根路徑纠永,如果public有的,就不會(huì)再去5000找
- 使用vue-cli配置代理谒拴,寫(xiě)在vue.config.js中
// 打開(kāi)代理服務(wù)器(方式1)
devServer:{
proxy:'http://localhost:5000'
}
// 打開(kāi)代理服務(wù)器(方式2)
devServer:{
proxy:{
//前綴/api跟在端口后面
'/api':{
target:'http://localhost:5000',
// 不加這個(gè)會(huì)發(fā)現(xiàn)是404尝江,是因?yàn)檎?qǐng)求到5000也帶上了/api
pathRewrite:{
'^/api':''
},
ws:true, //用于支持websocket
changeOrigin:true //用于控制請(qǐng)求頭中的host值
},
//前綴可以控制是否走代理
'/peiqi':{
target:'http://localhost:5001',
// 不加這個(gè)會(huì)發(fā)現(xiàn)是404,是因?yàn)檎?qǐng)求到5000也帶上了/api
pathRewrite:{
'^/peiqi':''
},
ws:true, //用于支持websocket
changeOrigin:true //用于控制請(qǐng)求頭中的host值
}
}