vue项目需要访问访问后台接口,因为前端项目是一个单独的服务,后台接口肯定也是单独的服务,两者之间的访问地址和端口坑定不一样,一访问后台接口肯定会出现跨域问题,什么是跨域,大概意思就是要访问的地址与当前服务启动的地址不同,或者说端口不一样,就相当于你从当前链接访问到一个新的链接当端口和域名发生改变时就会导致跨域问题的出现,

      这边在网上搜索了一下怎么解决vue项目中的跨域问题,大部分都说在config下index.js文件中的proxyTable配置一下就好了,

我在本地测试了一下,按照第一种方法,访问报404,,访问地址没有指向我配置的target,,,后面又找了一些资料,发现了第二种方法,在我本地测试了一下,可以成功请求后台接口,并且也接收到了后台的响应参数


第一种方法(网上大部分的写法)
proxyTable: {
        '/api':{
        target:'http://xxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/'
        }
      }
    }
第二种方法(亲测有效的方法)
proxyTable: {
        '/api/*':{
        target:'http://xxxx.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': '/api'
        }
      }
    }

以下是我本地测试访问后台接口的截图

两个页面请求的前缀不同,指定访问的后台地址也就不一样

 

 

在页面上打断点,可以看到请求后台接口成功,并且响应了参数

Logo

前往低代码交流专区

更多推荐