vue解决跨域问题

669 阅读1分钟

Vue解决跨域问题

首先在vue项目的config文件夹下找到index.js, 然后在dev下配置

// 配置跨域
proxyTable :{
  '/api':{
    target:'http://localhost:8088', // 后端地址
    changeOrigin:true,  //允许跨域
    pathRewrite:{
  /* 重写路径,当我们在浏览器中看到请求的地址为:http://localhost:8080/api/core/getData/userInfo 时,
   实际上访问的地址是:http://121.121.67.254:8185/core/getData/userInfo,因为重写了 /api
      '^/api':'/' //重写路径
    }
  }
},

image.png

在使用时这样就可以: this.$axios.post('/api/test/findAll',{})

在vue中使用proxy进行跨域的原理是:将域名发送给本地的服务器(启动vue项目的服务,loclahost:8080),再由本地的服务器去请求真正的服务器。

在proxy中设置要访问的地址,并重写/api为空的字符串,因为我们真正请求的地址是没有带/api