vue利用axios處理開發環境和生成環境的跨域問題
阿新 • • 發佈:2019-01-29
1.跨域,是一個需要前後端一起解決的伺服器問題,在vue-cli的webpack有解決這個問題的功能。
例如前端向後臺伺服器(http://localhost/echoIp/index.php)傳送一個請求,然後將收到的資料列印到頁面。
那麼由於開發環境不在這個伺服器上,所以就會產生跨域的問題。於是我們需要用到axios及修改配置檔案。
請求頁面的程式碼如下:
created(){
this.testaxios();
},
methods:{
testaxios(){
axios.post(
"/echoIp/index.php",
{'id' :111111111},
{ headers: {
'Content-type': 'application/json',
}
}).then(res=>{
console.log(res)
this.content=res.data;
})
}
}
配置檔案的程式碼如下:
dev: {
// Paths
assetsSubDirectory: 'static',
assetsPublicPath: '/' ,
proxyTable: {
'/': {
target: 'http://localhost',
changeOrigin: true,
pathRewrite: {
'^/': ''
}
}
},
host: 'localhost',
port: 8080,
autoOpenBrowser: false,
errorOverlay: true ,
notifyOnErrors: true,
poll: false,
useEslint: true,
showEslintErrorsInOverlay: false,
devtool: 'eval-source-map',
cacheBusting: true,
cssSourceMap: false,
},
這樣配置就可以解決開發環境下的跨域問題。
2.專案完成後如何匯出線上的版本呢!?
利用npm run build 就可以匯出一個dist資料夾,將該資料夾放到伺服器上執行裡面的index.html就可以把整個專案執行起來了,如果報錯的話,那麼你需要修改配置檔案build:{}裡面的assetsPublicPath,修改成
assetsPublicPath: './',
3.代理設定的作用是你要訪問後端的請求直接發到當前站點,因此你的 api 路徑都應該是不含 hostname 的相對路徑
部署到生產環境時,只要相對路徑保持不變,就不需要任何設定。
如果開發環境下的 api 路徑和生產環境的路徑不一致,那麼一定可以通過設定 proxyTable 使之一致。
因此,結論是,只要 proxyTable 設定得好,部署上線不需要做任何改動。