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

时间:2024-07-28 00:03:56

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

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

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);
});

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

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