跨域報(bào)錯(cuò)信息
產(chǎn)生原因
跨域是是因?yàn)闉g覽器的同源策略限制，是瀏覽器的一種安全機(jī)制，服務(wù)端之間是不存在跨域的。
所謂同源指的是兩個(gè)頁(yè)面具有相同的協(xié)議、主機(jī)和端口，三者有任一不相同即會(huì)產(chǎn)生跨域。
舉例
解決方法
常見(jiàn)的跨域解決方法有
- cors 這個(gè)需要由后端在響應(yīng)頭上配置
- jsonp 借助script中的標(biāo)簽src，在引入外部資源的時(shí)候不受同源限制，但是只能解決get請(qǐng)求跨域問(wèn)題
- 代理服務(wù)器
本篇文章，主要講解代理服務(wù)器在vue中的應(yīng)用，解決跨域問(wèn)題
通過(guò)vue腳手架配置
方式一
找到vue官網(wǎng)
? 在vue.config.js中添加如下配置：
devServer:{
proxy:"http://localhost:5000"
}
本機(jī)服務(wù)器要把信息轉(zhuǎn)發(fā)給誰(shuí)，端口號(hào)就寫(xiě)誰(shuí)
例如：本機(jī)是locahost：8080 要給locahost：5000發(fā)請(qǐng)求，那么配置的就是5000
把請(qǐng)求的改成8080
當(dāng)請(qǐng)求的資源本機(jī)原本就存在時(shí)，就不會(huì)發(fā)送請(qǐng)求，如果解決這個(gè)問(wèn)題，請(qǐng)看方式二
優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：配置簡(jiǎn)單，請(qǐng)求資源時(shí)直接發(fā)給前端（8080）即可。
缺點(diǎn)：不能配置多個(gè)代理，不能靈活的控制請(qǐng)求是否走代理。
工作方式：若按照上述配置代理，當(dāng)請(qǐng)求了前端不存在的資源時(shí)，那么該請(qǐng)求會(huì)轉(zhuǎn)發(fā)給服務(wù)器 （優(yōu)先匹配前端資源）
方式二
? 編寫(xiě)vue.config.js配置具體代理規(guī)則：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-683894.html
module.exports = {
devServer: {
proxy: {
'/api1': {// 匹配所有以 '/api1'開(kāi)頭的請(qǐng)求路徑
target: 'http://localhost:5000',// 代理目標(biāo)的基礎(chǔ)路徑
changeOrigin: true,
pathRewrite: {'^/api1': ''}
},
'/api2': {// 匹配所有以 '/api2'開(kāi)頭的請(qǐng)求路徑
target: 'http://localhost:5001',// 代理目標(biāo)的基礎(chǔ)路徑
changeOrigin: true,
pathRewrite: {'^/api2': ''}
}
}
}
}
/*
changeOrigin設(shè)置為true時(shí)，服務(wù)器收到的請(qǐng)求頭中的host為：localhost:5000
changeOrigin設(shè)置為false時(shí)，服務(wù)器收到的請(qǐng)求頭中的host為：localhost:8080
changeOrigin默認(rèn)值為true
*/
axios.get('http://localhost:8080/api/cars').then(
response => {
console.log('請(qǐng)求成功了',response.data)
},
error => {
console.log('請(qǐng)求失敗了',error.message)
}
優(yōu)缺點(diǎn)
優(yōu)點(diǎn)：可以配置多個(gè)代理，且可以靈活的控制請(qǐng)求是否走代理。
缺點(diǎn)：配置略微繁瑣，請(qǐng)求資源時(shí)必須加前綴。
加上前綴，走代理，不加前綴，不走代理文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-683894.html
到了這里，關(guān)于vue中解決ajax跨域問(wèn)題（no “access-control-allow-origin”）的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
