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