axios跨域問題(包括開發環境和生產環境)

之前寫過一篇axios跨域問題，寫的過於片面，沒有考慮過實際開發中遇到的問題，以及如何全局使用axios，這次再寫一篇，以后再有新發現再更新...

1、在static文件夾下新建/js/config.js，名字可以隨便取，目的是為了打包之后這個文件內容原樣輸出，不被壓縮，在這個文件中存放的就是后台接口的ip+端口，打包之后如要修改直接改這個文件就行，不用再碰源碼了，具體代碼如下：

// 在這定義的接口地址打包后代碼不會壓縮，可以任意修改
const baseurl = 'http://192.168.7.67:8091';

export default baseurl;

2、在src文件夾下新建/utils/http.js，這個文件中寫的就是全局使用axios了(小白個人是這么理解的，大神們勿噴，想要提點小白的可以留言，萬分感謝)，代碼如下：

import Vue from 'vue'
import axios from 'axios'

let baseurl = require('../../static/js/config.js').default; // 引入接口地址

const myHttp = {}

myHttp.install = function(Vue) {
    const http = axios.create({ // 使用create創建了一個實例對象
        timeout: 1000 * 600,    // 請求超時時間(毫秒)
        withCredentials: true,  // 是否攜帶cookie信息
        headers: {             
            'Content-Type' : 'application/json; charset=utf-8'
        },      
        baseURL: baseurl        // 請求的接口地址ip + 端口號
    });

    Vue.prototype.$http = http; // 這樣配置完就可以全局調用了
}
export default myHttp

3、修改/config中的dev.env.js與index.js

　　① /config/dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  OPEN_PROXY: true  // 是否開啟代理，重置后需要重啟vue-cli
})

　　② /config/index.js

proxyTable: devEnv.OPEN_PROXY === false ? {} : {
      '/proxyApi': {
        target: 'http://192.168.7.67:8091/',
        changeOrigin: true,
        pathRewrite: {
          '^/proxyApi': '/'
        }
      }
},

4、vue文件中的使用方法

getTableData() {
    this.$http.get(getTableURL, {
        params: {
            pageNum: 1,
            pageSize: 10
        }
    }).then(response => {
        console.log(response)
    })
}