最近在使用vue-cli搭建項(xiàng)目的過程中，遇到了跨域請求數(shù)據(jù)的問題，這里貼出我的解決方法，希望對大家有所幫助。
什么是跨域請求：
如果在A網(wǎng)站中，我們希望使用Ajax來獲得B網(wǎng)站中的特定內(nèi)容，如果A網(wǎng)站與B網(wǎng)站不在同一個域中，那么就出現(xiàn)了跨域訪問問題。由于瀏覽器同源策略，凡是發(fā)送請求url的協(xié)議、域名、端口三者之間任意一與當(dāng)前頁面地址不同即為跨域。
這里，數(shù)據(jù)請求用的是vue-resource(目前vue官方是推薦使用axios)，安裝插件：
npm install--save-devvue-resource
1
在main.js中引入插件：
importVueResourcefrom'vue-resource'
Vue.use(VueResource)
這里，解決跨域使用的是http-proxy-middleware來進(jìn)行接口代理，安裝方法同上：
npm install--save-devhttp-proxy-middleware
下面開始談?wù)?，舉個栗子：
本地項(xiàng)目地址是：localhost:8080，現(xiàn)在我們要訪問?http://m.maizuo.com/v4/api/film/comming-soon?和?http://m.maizuo.com/v4/api/billboard/home?這兩個線上地址：
首先，設(shè)置build/dev-server.js：
varproxyMiddleware =require('http-proxy-middleware')
varserver = express()
server.middleware = [? ? ? ? proxyMiddleware(['/film/coming-soon'], {target:'http://m.maizuo.com/v4/api', changeOrigin:true}),? ? ? ? proxyMiddleware(['/billboard/home'], {target:'http://m.maizuo.com/v4/api', changeOrigin:true})];
server.use(server.middleware);
注意，當(dāng)要訪問多個線上地址時，公共的地址部分寫在target屬性值里面，比如這里的?http://m.maizuo.com/v4/api?，然后[ ]里邊寫地址的不同部分。
然后，修改config/index.js :
dev:{env:require('./dev.env'),? ? port:8080,? ? proxyTable: {'/api': {? ? ? ? target:'http://m.maizuo.com/v4/api',? ? ? ? changeOrigin: true,? ? ? ? pathRewrite: {'^/api':''}? ? ? }? ? }? }
這里的target同上面的一樣，然后’/api’和’^/api’代表的就是這個根目錄地址；
然后，在頁面中具體的調(diào)用為：
this.$http.get('api/billboard/home').then((response) => {
});
這里，url的值為api + [ ] 中的部分 ;
然后，我們就解決了vue中的跨域問題 ;
這里，貼一下http-proxy-middleware插件的github地址，看更多用法 :
