webpack代理--proxy

最新推荐文章于 2025-07-06 10:15:00 发布

转载最新推荐文章于 2025-07-06 10:15:00 发布 · 972 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://segmentfault.com/a/1190000015664964

文章标签：

#webpack #java #javascript #ViewUI

本文介绍如何在Webpack中配置代理，以实现开发环境下API请求的转发。通过设置proxy字段，可以将前端请求转发到指定的后端地址，并进行路径重写。

//webpack.config.js
proxy: {
            '/drink': {
                target: "http://xxx.26.xx.75:8010/channelFreeDrink/",
                changeOrigin:true,
                pathRewrite: {
                    '^/drink': ''
                }
            }
      }

//api.js
const sourcelist = ()=>{
    return new Promise((resolve,reject)=>{
        // fetch(window.YY_API + '/channelFreeDrink/activity').then(res => {
        fetch('/drink/activity').then(res => {
            if(res.status==200) return res.json()
        }).then(data=>{
            resolve(data)
        })
    })
}

图片描述
图中黄框跟黄框所对应（/drink），白框（/activity）在代理请求的时候会加在target所指的链接后面