Vue配置代理解决跨越问题

最新推荐文章于 2024-08-12 13:22:54 发布

思考的行者

最新推荐文章于 2024-08-12 13:22:54 发布

阅读量1.5k

点赞数

分类专栏： vue 文章标签： vue.js webpack

本文链接：https://blog.csdn.net/xiaonankeji/article/details/127302831

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

一、配置全局统一的代理

在vue工程的vue.config.js（如没有则新建该文件）文件下，添加如下配置：

module.exports = defineConfig({
    devServer: {
        proxy: 'https://emsrot.com/uat-ssd'
    }
})

表示所有的接口都代理到https://emsrot.com/uat-ssd/****

二、按照不同的服务配置不同的代理

module.exports = defineConfig({
    devServer: {
        proxy: {
            '/fileUpload': {
                target: 'https://emsrot.com/uat-ssd',
                secure: false,
                changeOrigin: true,
            },
            '/mobile': {
                target: 'https://emsrot.com/uat-mobile',
                secure: false,
                changeOrigin: true,
            }
        }
    }
})

表示所有 以/fileUpload 开头的接口将请求到 https://emsrot.com/uat-ssd/fileUpload/，
所有以/mobile 开头的接口将请求到 https://emsrot.com/uat-ssd/mobile/

三、增加 pathRwrite属性

module.exports = defineConfig({
    devServer: {
        proxy: {
            '/fileUpload': {
                target: 'https://emsrot.com/uat-ssd',
                secure: false,
                changeOrigin: true,
                pathRwrite: {
                    "^/fileUpload": '' // ^/fileUpload是正则
                },
            }
        }
    }
})