Vue解决跨域

解决跨域问题

1. 在vue项目的根目录中添加vue.config.js

// webpack-dev-server 相关配置
    devServer: { // 设置代理
        host: 'localhost', //
        port: 8080, //自定义端口
        https: false, //false关闭https，true为开启
        open: true, //自动打开浏览器
        proxy: {
        	//只要请求路径中找到带有/api的，也可以写其他的，将会代理 
            '/api': { 
                target: 'http:xxxxxxxxx', //要跨越到达的目标地址
                ws: false, // 如果要代理 websockets
                changeOrigin: true, //开启跨域
                pathRewrite: {   //重写路径，这种是没有我们定义的前缀
                    '^/api': '/api'  // 这种接口配置出来 axios.get("api/login")=>自带target地址 + /api/login  = http:xxxxxxxxx/api/login
                    //'^/api': '/' 	//这种接口配置出来 axios.get("api/login")=> 将/api省略掉了   http:xxxxxxxxx/login  
                }
            }
        }
    },

proxy在服务器中会失效 就是说上传到服务器中代理失效, 在封装axios时，设置好默认baseURL

>//默认baseURL
if(process.env.NODE_ENV == 'development'){
    axios.defaults.baseURL="http://localhost:8080"  //开发环境就写本地
}else if(process.env.NODE_ENV == 'production'){
    axios.defaults.baseURL="http://xxxxxxxxxxxxxxxx"  //生产环境就写线上地址
}