使用proxyTable解决vue里的跨域问题

由于没有跨域的接口，所以，用8080端口请求8081端口，来模拟跨域。跨域会出现下面报错。

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。

 

1.找到config文件夹下index.js，在proxyTable对象里复制以下代码：

    proxyTable: {
      '/apis': {
        // 测试环境
        target: 'http://localhost:8081',  // 接口域名
        changeOrigin: true,  //是否跨域
        pathRewrite: {
            '^/apis': ''   //需要rewrite重写的,
        }              
    }
    },

 

　注意：【更改完这个配置文件后，需要重启项目】

 

2.使用fetch，vue-resource或axios请求接口

fetch请求：

    //用 /apis代替http://localhost:8082
    fetch("/apis").then(res=>{
      console.log(res);
    })

 

axios请求：

this.$axios.get("/apis").then(res=>{
      console.log(res);
    })

 vue-resource请求：

  this.$http.get("/apis").then(res=>{
      console.log(res);
    });

 

这样请求，就不会跨域了:

扫码关注我们

微信号：SRE实战

拒绝背锅 运筹帷幄