Vue后台管理系统项目前端解决跨域问题

在开发中由于前后端服务器不一致，就有了跨域问题

解决办法：使用proxy (开发环境)

在项目目录下的vue.config.js文件中配置：

module.exports = {
 publicPath: "./",   //配置打包之后的相对路径
 devServer: {
   proxy: {		//这里可以配置代理
     "/api": {
       target: "http://api.focues.com",  //这里写的是后台接口的域名和端口号
       ws: true,    //启用websockets
       changeOrigin: true,  //开启代理
       pathRewrite: {   // 重命名
         "^/api": "/"
       }
     }
   }
 }

• 然后使用/api/代替你原本的服务器端的baseUrl

在发送请求时

axios({
    url: '/api/login.action',  
    method: 'post',
    params: {
        loginName:username,password: password
    }
}).then(res => {
    var str = res.data;        
    sessionStorage.setItem('loginName',username)
    sessionStorage.setItem('user',username)
    this.$router.replace({name: 'Menu', params: {loginName: username,password:password}})
}).catch(err => {
    console.log(err.data)
})

正式环境

在main.js文件中配置

axios.defaults.baseURL='http://***/***';