Vue项目中关于axios跨域的设置

config文件夹中的dev.env.js

proxyTable: {
    '/api': {
        target: 'http://192.168.1.1:80', // api代理服务器地址
        changeOrigin: true, // 允许跨域
        secure: false,
        pathRewrite: {
            '^/api': '/'
        }
    }
}

target是我们要将请求发送的靶向目标。此选项可以理解为我们的node后台为我们作了一次正向代理，以此避免了跨域。

config文件夹中的index.js

const devEnv = require('./dev.env')
module.exports = {
    dev: {
        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: devEnv.proxyTable,
        
        //....
    }
}

如此我们每次只需要更改dev.env.js文件夹中的target项即可。

使用axios跨域时候我们需要在main.js中声明

import Axios from 'axios'
Vue.prototype.$axios = Axios

发送请求时别忘了$

this.$axios({
    // ....
})