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

在開發環境與後端調試的時候不免會遇到跨域問題，不少人說跨域交給後端解決就行了。

其實否則，前端也有不少方法能夠解決跨域，方便也快捷。

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

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

打開config下面的index.js，找到proxyTable，添加如下代碼便可：

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

配置完以後須要重啓下項目 npm run dev

重啓以後，就能夠調用，實現跨域了

具體使用：

在須要調用的接口前加上「/api」便可

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

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

Vue.prototype.api = process.env.NODE_ENV === 'production' ? '' : '/api' 調用接口的時候的url就能夠寫成api + '接口地址'到此結束，但願有所幫助。