vite 配置代理
在vue2中使用proxy进行跨域的原理是:将域名发送给本地的服务器(启动vue项目的服务,loclahost:8080),再由本地的服务器去请求真正的服务器。1.在proxy中设置要访问的地址,并重写/api为空的字符串,因为我们真正请求的地址是没有带/api,这个重写很重要!!!2.在创建axios实例的时候将baseURL设置为/api ,这时候我们的跨域就已经完成了。
·
在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
更多推荐
所有评论(0)