vue3项目之vite 配置代理跨域

vite 配置代理跨域

• 单个代理端口的情况

http://110.42.184.111/api/room/room/getRoomList 代理成

http://localhost:5173/release/api/room/room/getRoomList

在 vite.config.ts 加入

// 配置代理
server: {
    // 本地端口号
    host: 'localhost',
    port: 5173,
        
    proxy: {
        // 自定义前缀
        '/release': {
            
            // 目标端口号
            target: 'http://110.42.184.111',
            
            // 路径重写：去掉自定义前缀
            rewrite: path => path.replace(/^\/release/, '')
        }
    }
}

http.ts

const defaultConfig = {
    timeout: 5000,
    
    // 生产环境
    // baseURL: import.meta.env.PROD ? 'http://110.42.184.111' : 'http://localhost:3000/release'
    
    // 开发环境
    baseURL: 'http://localhost:5173/release'
}

api/index.ts

// 获取房屋列表
export const reqgetRoomList = function (params) {
    return http.httpRequestGet('/api/room/room/getRoomList', params)
}

• 多个端口的情况

proxy: {
    // 自定义前缀1
    '/release': {

        // 目标端口号1
        target: 'http://110.42.184.111',

        // 路径重写：去掉自定义前缀
        rewrite: path => path.replace(/^\/release/, '')
    },
        
    // 自定义前缀2
    '/release2': {

        // 目标端口号2
        target: 'http://110.42.184.122',

        // 路径重写：去掉自定义前缀
        rewrite: path => path.replace(/^\/release2/, '')
    }
 
}

http.ts：baseURL 不能写死

const defaultConfig = {
    timeout: 5000,
       
    // 开发环境
    baseURL: 'http://localhost:5173'
}

api/index.ts：需要区分前缀！

export const reqgetRoomList = function (params) {
    return http.httpRequestGet('/replace/api/room/room/getRoomList', params)
}

export const reqgetRoomDetail = function (params) {
    return http.httpRequestGet('/replace2/api/room/room/getRoomDetail', params)
}