vue1.0時(shí)代我們可以通過jsonp方法進(jìn)行跨域泌射,但是vue更新到2.0之后,作者就不再推薦使用vue-resouce跟后臺進(jìn)行交互而是推薦使用axios其兴,然而axios默認(rèn)是沒有跨域的jsonp方法的,我們可以在配置文件中設(shè)置代理來進(jìn)行跨域崭添。
在webpack.config.js(config—>index.js)文件里設(shè)置代理
dev: {
env: require('./dev.env'),
port: process.env.PORT || 8080,
autoOpenBrowser: true,
assetsSubDirectory: 'static',
assetsPublicPath: '/',
proxyTable: {
'/api': {
target: 'http://yiinb.com', //設(shè)置調(diào)用接口域名和端口號別忘了加http
changeOrigin: true,
pathRewrite: {
'^/api': '/' //這里理解成用‘/api’代替target里面的地址匪煌,組件中我們調(diào)接口時(shí)直接用api代替
// 比如我要調(diào)用'http://yiinb.com/login.php'鳍侣,直接寫‘/api/login.php’即可
}
}
}
這樣配置好之后我們就可以正常的使用get或post請求了挽拔,不用擔(dān)心跨域問題
mounted(){
// this.$http.post('/api/login.php',"").then((res)=>{
// console.log(res)
// })
this.$http({
method: 'post',
url: '/api/login.php',
data: {username: 'Fred'}
}).then((res)=>{
console.log(res)
})
}