vite 配置代理

在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