vue axios跨域请求解决

vue axios跨域请求解决

1、修改vue项目下的config目录下的index.js

index.js

proxyTable: {
  "/api": {
    target: "http://192.168.0.111:8888/", //这里是修改你要访问的后台服务器的ip+端口
    changeOrigin: true,
    pathRewrite: {
      '^/api': ''  //这里理解成用‘/api’代替target里面的地址,
    }
  }  

2、写一个请求，这里访问http://192.168.0.111:8888/account/login，但是在axios里面写/api/account/login，这里的api就是代表了http://192.168.0.111:8888，有些人还没看懂。

 	this.$axios.post('/api/account/login',admin).then(res=>{
            var result=res.data;
            if(result.username==this.username){
                this.$router.push('/main');
            }
        })

3、看一下访问的结果,看URL写的是http://localhost:8080/api/account/login，看到这里大家不要大惊小怪，这里的http://localhost:8080/api就是代表我们访问后端的http://192.168.0.111:8888，但是如果单独去访问http://localhost:8080/api/account/login会报错404的。