vue路径代理

前后端分离,后端8080,前端8081,图片路径/img/xx.png,前端请求后端的图片默认是请求8081端口的,需要把图片的请求代理到8080端口。

devServer: {
        proxy: {
            '/img/*':{
                target:'http://localhost:8080/img/',
                changeOrigin: true,
                pathRewrite:{
                    '^/img':''
                }
            }
        }
    }

 

Vue中,可以使用代理(proxy)配置来实现服务器代理代理配置可以在项目的vue.config.js文件中进行设置。通过使用代理,可以将前端请求发送到指定的后端接口地址代理配置可以根据请求路径的不同进行匹配,并将请求转发到对应的后端接口。 在vue.config.js文件中,通过devServer的proxy属性来配置代理。可以为不同的请求路径设置不同的target(后端接口地址),changeOrigin(改变请求源),ws(启用WebSocket代理),secure(禁用安全检查)等属性。 例如,如果需要将请求路径以/abc开头的请求代理到http://XX.XX.XX.XX:8081这个后端接口地址,可以在proxy中进行如下配置: ```javascript devServer: { proxy: { "/abc": { target: "http://XX.XX.XX.XX:8081", changeOrigin: true, ws: true, secure: false } } } ``` 这样,在前端发送的请求中,以/abc开头的请求将被代理到http://XX.XX.XX.XX:8081这个后端接口地址。 另外,如果需要监测多个接口并进行代理,可以在proxy中写多个配置,每个配置对应一个目标后端接口地址。例如: ```javascript devServer: { proxy: { "/zzz": { target: "http://XX.XX.XX.XX:8082", changeOrigin: true, ws: true }, "/xxx": { target: "http://XX.XX.XX.XX:8083", changeOrigin: true, ws: true } } } ``` 这样,请求路径以/zzz开头的请求将被代理到http://XX.XX.XX.XX:8082这个后端接口地址,而请求路径以/xxx开头的请求将被代理到http://XX.XX.XX.XX:8083这个后端接口地址
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值