如何實現vue前端跨域,proxyTable解決開發環境前端跨域問題

在開發環境與後端調試的時候難免會遇到跨域問題,很多人說跨域交給後端解決就好了。

其實不然,前端也有很多方法可以解決跨域,方便也快捷。

常見的有nginx轉發、node代理。

在vue項目中常用的是proxyTable,這個用起來很方便。

打開config下面的index.js,找到proxyTable,添加以下代碼即可:

'/api': { //替換代理地址名稱
target: 'http://api.douban.com/', //代理地址
changeOrigin: true, //可否跨域
pathRewrite: {
'^/api': '' //重寫接口,去掉/api
}
}

如何實現vue前端跨域,proxyTable解決開發環境前端跨域問題

配置完之後需要重啓下項目 npm run dev

重啓之後,就可以調用,實現跨域了

具體使用:

在需要調用的接口前加上“/api”即可

如何實現vue前端跨域,proxyTable解決開發環境前端跨域問題

不出意料,點擊按鈕之後控制檯會打印出返回結果

如何實現vue前端跨域,proxyTable解決開發環境前端跨域問題

爲了方便打包後去除'/api',建議把'/api'設成全局,在main.js中添加

Vue.prototype.api = process.env.NODE_ENV === 'production' ? '' : '/api'
調用接口的時候的url就可以寫成api + '接口地址'
到此結束,希望有所幫助。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章