axios跨域問題

項目開發過程中遇到了使用axios請求后台接口跨域的問題，網上搜了幾種方案都沒有解決，最后通過配代理的方式解決了，代碼如下：

報錯：

(因為項目打包后，使用時需要多次修改接口ip，所以我把ip單獨定義到了一個文件中)

　　1、定義ip接口，在/static/下新建文件夾js，新建文件config.js，即：/static/js/config.js，(static文件夾下的文件打包后是原樣輸出的)

// config.js
// 這段代碼是我從網上找到的，其中我用到的字段只有baseURL，其它字段大家任意，有需要的話就定義

window.g = {
    baseURL: 'http://192.168.7.111:8091',    // 配置服務器地址
    mqtt_ip: "39.106.58.252",
    mqtt_port: "61623",
    mqt_user: "bin",
    mqtt_password: "123456"
}

　　2、定義config.json，同樣是在static文件夾下定義，即：/static/js/config.json，(只要是static文件夾下就行，不一定非要在js下)

{
    "baseURL": "http://192.168.7.111:8091"
}

　　

注：定義這個文件的原因是，我們要做跨域請求代理，需要修改/config/index.js，修改方式如下：

// 在index.js中引入config.json
const configJSON = require('../static/js/config.json');
const baseURL = configJSON.baseURL;

// 在index.js下找到proxyTable:{}，在這進行編輯

proxyTable: {
  '/api': {
        target: baseURL,
        changeOrigin: true,
        pathRewrite: {
            '^/api' : ''
        } 
    }  
}

　　3、axios請求

enableDisableEvent(data) {
    let postData = {
        id: data.id,
        sourceStatic: data.sourceState
    }

    axios.post('/api/web/modules/controller/source/dorp/source', {
        params: {
            ...postData,
        }
    })
    .then(res => {
        console.log(res)
    })    
    .catch(err => {
        console.log(err)
    })
}

　　注：其中的/api是不能省略的

參考網址：

　　https://www.cnblogs.com/momozjm/p/7993236.html

　　https://blog.csdn.net/aliven1/article/details/89927910

打包完后：