寫在前面

小編在開發(fā)過程中從原生的jq+css寫代碼，到vue-cli腳手架搭建項(xiàng)目，都遇到了跨域問題，之前解決跨域問題一般都是后臺加請求頭，前端用jsonp的話只適用于get請求，也是很少用，自從node.js npm 模塊的出現(xiàn)，也就出現(xiàn)了前端使用代理解決跨域使用http-proxy-middleware 代理解決，下邊說一下具體的解決辦法。

使用http-proxy-middleware 代理解決（項(xiàng)目使用vue-cli腳手架搭建）

首先需要先安裝

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

網(wǎng)上有一大堆關(guān)于這個(gè)插件的原理，請自行g(shù)oogle，這里就不詳細(xì)解釋，這是寫出來自己的理解。

proxy中間件配置
proxy([context,] config)
var proxy = require('http-proxy-middleware');   //引入插件
var apiProxy = proxy('/api', {target: 'http://www.example.org'});
//                   \____/   \_____________________________/
//                     |                    |
//                需要轉(zhuǎn)發(fā)的請求           目標(biāo)服務(wù)器

// 'apiProxy' 現(xiàn)在已經(jīng)準(zhǔn)備作為一個(gè)中間件了。

只看這個(gè)只是知道了他的原理是通過代理將請求代理到你想請求的服務(wù)器上，然而還不知道怎么用？
在vue-cli項(xiàng)目中的config文件夾下的index.js配置文件中,在proxyTable中添寫如下代碼

加入服務(wù)器提供的接口如果長這樣https://www.exaple.com/server_new/login，我們把域名提取出來如https://www.exaple.com；

//在開發(fā)下邊配置
    dev: {
        env: require('./dev.env'),
        port: 9521,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        ***********   //http-proxy-middleware  解決跨域的配置
        proxyTable: {
             '/api': {    
                              //將www.exaple.com映射為/apis
            target: 'https://www.exaple.com',  // 接口域名,被請求的地址
            secure: false,  // 如果是https接口，需要配置這個(gè)參數(shù)
            changeOrigin: true,  //是否跨域
            pathRewrite: {
                '^/api': '/api'   //需要rewrite的,
                 }              
            }
       },
        cssSourceMap: false
    }

也就是用/api代理了https://www.exaple.com這個(gè)域名。

如上所述，跨域的代理配置就好了，小編在項(xiàng)目中使用的是axios請求，所以在開發(fā)中就是這樣了

     var url = '/server_new/login'; // 這里就是剛才的config/index.js中的/api,由于你在重寫的方法里邊哦配置了`/api`所以就不用每個(gè)接口都寫了。
//此時(shí)需要把dataUrl掛在到vue實(shí)例上.
      this.$axios
        .get(this.dataUrl + url)
        .then(function(response) {
          console.log(response);
        })
        .catch(function(error) {
          console.log(error);
        });

這樣是解決跨域問題了，但是打包部署是就會(huì)出問題。

所以我就在confing配置了一下，由于項(xiàng)目封裝的比較多，用的axios攔截器，所以需要配置多個(gè)，
一，先說個(gè)最簡單的辦法就是：
配置一個(gè)開發(fā)時(shí)的路徑，配置一個(gè)上線的路徑

let serverUrl = '/api/'  //本地調(diào)試時(shí) 
// let serverUrl = 'https://www.exaple.com'  //打包部署上線時(shí) 
export default { 
  dataUrl: serverUrl
}

接下來再看看我自己的項(xiàng)目中的配置。
首先在config目錄下有三個(gè)文件，分別是index.js,基本配置，dev開發(fā)環(huán)境的配置，prod生產(chǎn)的配置，這樣就可以一勞永逸了。

config.png

• index.js

// see http://vuejs-templates.github.io/webpack for documentation.
const path = require('path')

module.exports = {
    build: {
        env: require('./prod.env'),
        index: path.resolve(__dirname, '../dist/index.html'),
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: './',
        productionSourceMap: true,
        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],
        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    },
    dev: {
        env: require('./dev.env'),
        port: 9521,
        autoOpenBrowser: true,
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        //http-proxy-middleware  解決跨域的配置
        proxyTable: {},
        // CSS Sourcemaps off by default because relative paths are "buggy"
        // with this option, according to the CSS-Loader README
        // (https://github.com/webpack/css-loader#sourcemaps)
        // In our experience, they generally work as expected,
        // just be aware of this issue when enabling this option.
        cssSourceMap: false
    }
}

• dev.env.js

var merge = require('webpack-merge')
var prodEnv = require('./prod.env')
module.exports = merge(prodEnv, {
    NODE_ENV: '"development"',
    BASE_API: '"/"', //開發(fā)環(huán)境的接口地址，api在連接跨域時(shí)已經(jīng)配置好了，所以這里只需要寫個(gè)/就好了
});

• prod.env.js

module.exports = {
    NODE_ENV: '"production"',
    BASE_API: '"http://testpvt.boss.pb-raising.com/pbs"', //這個(gè)是線上的環(huán)境接口
}

上邊的配置好了后，然后再axios的全局?jǐn)r截器中配置好請求

import axios from 'axios'
// 創(chuàng)建axios實(shí)例
// https://www.kancloud.cn/yunye/axios/234845
const service = axios.create({
    baseURL: process.env.BASE_API, // api的base_url
    timeout: 100000, // 請求超時(shí)時(shí)間
    // 所有請求都以Json形式傳送
    // 會(huì)有預(yù)檢請求，服務(wù)端需要正常通過OPTIONS請求
    // http://www.ruanyifeng.com/blog/2016/04/cors
    headers: {
        // 'Content-type': 'application/json;charset=UTF-8',
        //'Content-type': ['application/json;charset=UTF-8', 'application/x-www-form-urlencoded'],
        //'Access-Control-Allow-Origin': '*',
        //'Access-Control-Allow-Headers': 'Origin, X-Requested-With, Content-Type, Accept',
        //'Access-Control-Allow-Methods': '*'
    }
});

// request攔截器  請求
service.interceptors.request.use(config => {
    return config
}, error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
}) 
// request攔截器  響應(yīng)
service.interceptors.response.use(config => {
    return config
}, error => {
    // Do something with request error
    console.log(error) // for debug
    Promise.reject(error)
}) 
export default service

結(jié)束語

至此，vue-cli的跨域問題就解決了，還有什么寫的不清楚的地方，還請簡友多多指教。