顺德人做多上哪个网站,中卫网站设计,网站路径,网站建设介绍书Vite的target、rewrite和changeOrigin的使用场景
1. target
使用场景#xff1a;target 属性在 Vite 的 vite.config.ts 或 vite.config.js 文件的 server.proxy 配置中指定#xff0c;用于设置代理服务器应该将请求转发到的目标地址。这通常是一个后端服务的API接口地址。…Vite的target、rewrite和changeOrigin的使用场景
1. target
使用场景target 属性在 Vite 的 vite.config.ts 或 vite.config.js 文件的 server.proxy 配置中指定用于设置代理服务器应该将请求转发到的目标地址。这通常是一个后端服务的API接口地址。 配置示例
export default defineConfig({ server: { proxy: { /api: { target: http://192.168.110.188:3091, // 后端API地址 // ... 其他配置 }, }, }, // ... 其他配置
});说明在上面的示例中/api 是代理路径的前缀当在前端代码中发起一个以 /api 开头的请求时Vite 会将这个请求转发到 target 指定的地址。
2. rewrite
使用场景rewrite 属性是一个函数用于在将请求转发到目标地址之前修改请求的URL路径。这通常用于移除代理路径前缀以便后端服务能够正确地处理请求。 配置示例
export default defineConfig({ server: { proxy: { /api: { target: http://192.168.110.188:3091, // 后端API地址 rewrite: (path) path.replace(/^\/api/, ) // 移除/api前缀 }, }, }, // ... 其他配置
});说明在上面的示例中rewrite 函数使用了一个正则表达式 /^/api/ 来匹配以 /api 开头的路径并使用 replace 方法将其替换为空字符串从而移除了前缀。这样当前端代码发起一个以 /api/getList 的请求时Vite 会将其转发到 http://192.168.110.188:3091/getList而不是 http://192.168.110.188:3091/api/getList。
3. changeOrigin
**注意**虽然 changeOrigin 在参考文章中并未直接提及但它是许多代理配置中常见的属性包括 Vite 的代理配置。 使用场景changeOrigin 通常用于在跨域代理请求时更改请求的 origin 头部使得后端服务认为请求是来自于 target 指定的地址而不是实际的前端开发环境。 配置示例假设包含 changeOrigin
export default defineConfig({ server: { proxy: { /api: { target: http://192.168.110.188:3091, changeOrigin: true, // 更改请求的origin头部 rewrite: (path) path.replace(/^\/api/, ) }, }, }, // ... 其他配置
});说明当 changeOrigin 设置为 true 时Vite 会自动将请求的 origin 头部设置为 target 指定的地址。这在处理跨域请求时尤为重要因为一些后端服务会检查请求的 origin 头部来决定是否允许该请求。 总结
target 用于指定代理的目标地址通常是后端服务的API接口地址。 rewrite 用于在将请求转发到目标地址之前修改请求的URL路径通常用于移除代理路径前缀。 changeOrigin尽管在参考文章中未直接提及用于在跨域代理请求时更改请求的 origin 头部以便后端服务能够正确地处理请求。这三个属性通常配合使用以解决前端开发中的跨域问题。
感谢观看有帮助的话点点赞点点关注谢谢老铁
