首页 前端知识 vue用vite配置代理解决跨域问题(target、rewrite和changeOrigin的使用场景)

vue用vite配置代理解决跨域问题(target、rewrite和changeOrigin的使用场景)

2024-07-10 22:07:56 前端知识 前端哥 680 999 我要收藏

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 头部,以便后端服务能够正确地处理请求。这三个属性通常配合使用,以解决前端开发中的跨域问题。

感谢观看,有帮助的话,点点赞点点关注,谢谢老铁!

转载请注明出处或者链接地址:https://www.qianduange.cn//article/13949.html
标签
评论
发布的文章

jQuery-w3school(2020

2024-08-04 23:08:08

jQuery常用方法总结

2024-08-04 23:08:34

Vue2使用echarts树图(tree)

2024-08-04 23:08:29

图表库-Echarts

2024-08-04 23:08:57

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!