在新的框架學(xué)習(xí)中我們需要學(xué)的不僅僅是框架還要學(xué)習(xí)他的方法，那么就拿vue這個(gè)框架來(lái)說(shuō)，在當(dāng)下也是比價(jià)流行使用的，輕量級(jí)的特點(diǎn)而且容易掌握。那么今天我們就來(lái)說(shuō)說(shuō)有關(guān)于“在vue.js中怎么解決跨域問(wèn)題？”這個(gè)問(wèn)題吧！
1.什么是跨域？
對(duì)于問(wèn)題我們要先知道什么是跨域這樣子才可以方便的我們的了解。那么對(duì)于跨域簡(jiǎn)單的來(lái)說(shuō)就是由于瀏覽器同源策略，一般通過(guò)發(fā)送請(qǐng)求URL的協(xié)議、域名、端口三者之間任意一種與我們當(dāng)前的頁(yè)面地址不同的都被稱為跨域。如：網(wǎng)絡(luò)協(xié)議不同、端口不同、域名不同、子域名不同、域名和域名對(duì)應(yīng)ip等都被稱為跨域。
2.如何解決跨域？
(1)、proxy代理
我們可以在項(xiàng)目中的?config?或者?index.js?中添加代碼，代碼如下：
proxyTable: {
'/api': {
target: 'http://localhost:8083/',//設(shè)置你調(diào)用的接口域名和端口號(hào) 別忘了加http
changeOrigin: true, //這里true表示實(shí)現(xiàn)跨域
pathRewrite: {
'^/api':'/'//這里理解成用‘/api’代替target里面的地址，后面組件中我們掉接口時(shí)直接用api代替 比如我要調(diào)用'http://40.00.100.100:3002/user/add'，直接寫(xiě)‘/api/user/add’即可
}
}在通過(guò) axios 來(lái)實(shí)現(xiàn)發(fā)送訪問(wèn)，在?main.js?中導(dǎo)入已經(jīng)安裝好的 axios，并掛載到原型上去，代碼如下：
import Axios from 'axios' //導(dǎo)入axios
//將axios掛載到原型上
Vue.prototype.$axios = Axios;最后我們?cè)偻ㄟ^(guò)?this.$axios.get().then()?來(lái)實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求，代碼如下：
//發(fā)送get請(qǐng)求
show() {
//用/api來(lái)代理'http://localhost:8083'
this.$axios
.get("/api/selectall")
.then(res => {
this.list = res.data.result;
// }
})
.catch(e => {
console.log(e);
});
},
//發(fā)送post請(qǐng)求
add() {
this.$axios({
method: "post",
url: "/api/saveinfo",
params: {
name: this.name //傳遞的參數(shù)
}
}).then(res => {
this.show();
});
},總結(jié)：
這就是小編收集的相關(guān)資料，當(dāng)然如果你有不一樣的想法也可以和大家一起分享探討學(xué)習(xí)，希望小編的分享對(duì)你有所幫助更多相關(guān)的 vue資料我們都可以 W3cschool中進(jìn)行搜索相關(guān)內(nèi)容學(xué)習(xí)和觀看視頻。
