您好,欢迎访问欧亿体育!

020-88886892

全国咨询热线

您现在所在位置: 主页 > 通知资讯

vite 配置代理

更新时间:2024-01-29

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

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

  

 

   2.在创建axios实例的时候将baseURL设置为/api ,这时候我们的跨域就已经完成了。

  

 

   3. 假如请求的真正地址为:http://48.96.217.56:8185/core/getdata/userInfo,但我们在浏览器上会看到是这样的: http://localhost:8080/api/core/getData/userInfo ,多了个/api,但并不影响我们请求数据。

 

 

vue3配置跨域代理

VITE_PROXY = [["/basic-api","http://localhost:3000"]]
/basic-api 是代理的请求前缀
ret[prefix] = {
   target: target,
   changeOrigin: true,
   ws: true,
   rewrite: (path) => path.replace(new RegExp(`^${prefix}`), ''),
   ...(isHttps ? { secure: false } : {}),
 };
rewrite: (path) => path.replace(new RegExp(`^${prefix}`), '')

作用:请求路径的重写,在请求中,请求前缀会被替换为空字符
假设接口地址为:/basic-api/getUserInfo

// 配置代理前缀 :VITE_PROXY = [["/basic-api","http://localhost:3000"]]

那么实际请求路径为 http://localhost:3000/basic-api/basic-api/getUserInfo

// 路径重写,过滤掉请求前缀/basic-api
rewrite: (path) => path.replace(new RegExp(`^${prefix}`), '')

//那么在我们在浏览器中看到的请求路径为: http://localhost:3000/basic-api/getUserInfo

在线客服

ONLINE SERVICE

联系电话

020-88886892

返回顶部