vite 配置反向代理

在Vite中配置反向代理可以通过修改vite.config.ts文件来实现。需要在server字段下添加proxy字段，并设置代理规则。例如，使用vite.config.ts文件中的配置：

export default defineConfig({
  // 其他配置...

  // 设置反向代理，跨域
  server: {
    // 设置服务启动端口号
    port: 4500,
    
    // 设置反向代理规则
    proxy: {
      '/api': {
        target: 'http://localhost:3001/', // 代理的目标地址
        changeOrigin: true, // 改变源地址，允许跨域
        rewrite: (path) => path.replace(/^\/api/, '') // 重写路径，去掉前缀"/api"
      }
    }
  }
})

在上述配置中，将以`/api`开头的请求都代理到`http://localhost:3001/`上，并且通过`changeOrigin: true`来实现跨域。通过`rewrite`函数，可以将请求路径中的`/api`前缀去掉，以适应后端接口的路由规则。这样，当在前端代码中发起以`/api`开头的请求时，Vite会将请求转发到指定的代理地址上。<span class="em">1</span><span class="em">2</span>
#### 引用[.reference_title]
- *1* [webpack里如何配置反向代理，怎样配置反向代理，webpack配置反向代理(前后端联调)，如何用反向代理解决跨域...](https://download.csdn.net/download/weixin_38550812/14886439)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *2* [vue3+vite 配置反向代理和跨域 设置端口号](https://blog.csdn.net/weixin_45547638/article/details/127406742)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]