axios解决跨域问题

axios解决跨域问题

1 在webpack文件vue.config.js中可以设置别名

configureWebpack:{
        resolve:{
        	//设置别名
            alias:{
                'views': '@/views',
                'components': '@/components',
                'router': '@/router',
                'store': '@/store',
                'assets': '@/assets',
                'utils':'@/utils'
              }
        }
    }

2 在webpack文件vue.config.js中可以设置跨域请求

devServer: {
        overlay: { // 让浏览器 overlay 同时显示警告和错误
          warnings: true,
          errors: true
        },
        host: "localhost",
        port: 8080, // 端口号
        https: false, // https:{type:Boolean}
        open: false, //配置自动启动浏览器
        hotOnly: true, // 热更新
        //proxy: 'http://localhost:8080'   // 配置跨域处理,只有一个代理
         proxy: { //配置多个跨域
            "/api": {
                target: "http://172.12.12.12:2016",
                changeOrigin: true,
                //ws: true,//websocket支持
                secure: false,
                pathRewrite: {
                    "^/api": ""
                }
            }
         }
    }

• 在请求时url变成：
  
• baseURL变成空，而其他请求的前面都添加上/api，如下：