最近在使用vue-cli搭建項目的過程中，遇到了跨域請求數據的問題，這里貼出我的解決方法，希望對大家有所幫助。

什么是跨域請求：

如果在A網站中，我們希望使用Ajax來獲得B網站中的特定內容，如果A網站與B網站不在同一個域中，那么就出現了跨域訪問問題。由于瀏覽器同源策略，凡是發送請求url的協議、域名、端口三者之間任意一與當前頁面地址不同即為跨域。

這里，數據請求用的是vue-resource(目前vue官方是推薦使用axios)，安裝插件：

npm install --save-dev vue-resource

在main.js中引入插件：

import VueResource from 'vue-resource'

Vue.use(VueResource)

這里，解決跨域使用的是http-proxy-middleware來進行接口代理，安裝方法同上：

npm install --save-dev http-proxy-middleware

下面開始談正事，舉個栗子：

本地項目地址是：localhost:8080，現在我們要訪問http://m.maizuo.com/v4/api/film/comming-soon 和http://m.maizuo.com/v4/api/billboard/home 這兩個線上地址；

首先，設置build/dev-server.js：

var proxyMiddleware = require('http-proxy-middleware')
var server = 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);

注意，當要訪問多個線上地址時，公共的地址部分寫在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'代表的就是這個根目錄地址；

然后，在頁面中具體的調用為：

this.$http.get('api/billboard/home').then((response) => {

});

這里，url的值為api + [ ] 中的部分 ;

然后，我們就解決了vue中的跨域問題 ;

這里，貼一下http-proxy-middleware插件的github地址，看更多用法 :

https://github.com/chimurai/http-proxy-middleware

然后，就可以下班了~~~