Vite使用proxy如何获取http代理ip？

发布日期：2023-02-04

Vite在开发环境中使用proxy进行多个服务器获取http代理ip

• 1.Vite通过server.proxy配置自定义代理规则
• 2.server.proxy分为字符串简写写法和选项写法和正则表达式写法还有proxy 实例方法
• 3.在进行项目开发时，如果只需要代理一个服务器，直接用字符串简写即可

// vite.config.ts 代理配置

    proxy: { // 代理配置

     '/dev': 'https://www.baidu.com/'

     },

    // 代理接口调用 通过dev

    export function login(data: object) {

     return request({

     url: '/user/login',

     method: 'post',

     baseURL: '/dev',

     data

     })

    }

    // 实际调用地址为

    https://www.baidu.com/dev/user/login

4.开发时，如果需要代理多个服务器，场景为后端接口分布在不同开发同事本机上，开发时通过选项写法代理无缝对接多个服务器。

user部分接口在https://www.baidu.com/

customer部分接口在https://www.taobao.com/

// vite.config.ts 代理配置

    proxy: { // 代理配置

     '/user': {

     target: 'https://www.baidu.com',

     changeOrigin: true,

     rewrite: (path) => path.replace(/^\/user/, '')

     },

     '/cus': {

     target: 'https://www.taobao.com',

     changeOrigin: true,

     rewrite: (path) => path.replace(/^\/cus/, '')

     }

     },

    // 代理接口调用 

    // 1.调用user部分接口

    export function getUser(data: object) {

     return request({

     url: '/user/getUser',

     method: 'get',

     baseURL: '/user',

     data

     })

    }

    // 实际调用地址为

    https://www.baidu.com/user/getUser // /user通过rewrite正则过滤掉了

    // 2.调用cus部分接口

    export function getCus(data: object) {

     return request({

     url: '/customer/getCus',

     method: 'get',

     baseURL: '/cus',

     data

     })

    }

    // 实际调用地址为

    https://www.taobao.com/customer/getCus // /cus通过rewrite正则过滤掉了

5.正则表达式写法

// vite.config.ts 代理配置

    '^/fallback/.*': {

     target: 'http://jsonplaceholder.typicode.com',

     changeOrigin: true,

     rewrite: (path) => path.replace(/^\/fallback/, '')

     },

    // 调用fallback部分接口

    export function getFallback(data: object) {

     return request({

     url: '/getFallback',

     method: 'get',

     baseURL: '/fallback/getFall',

     data

     })

    } 

    // 实际调用地址为

    http://jsonplaceholder.typicode.com/getFall/getFallback // //fallback/getFall通过rewrite正则过滤变成/getFall