vue跨域使用 http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）

Vue CLI项目中使用http-proxy-middleware代理解决跨域问题

最新推荐文章于 2025-10-17 05:26:39 发布

原创

最新推荐文章于 2025-10-17 05:26:39 发布 · 4.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端解决跨域 #http-proxy-middleware #vue-cli手脚架 #vue使用代理解决跨域

本文介绍了在Vue CLI搭建的项目中，如何利用http-proxy-middleware解决前端开发过程中的跨域问题。通过在`config/index.js`的`proxyTable`配置代理规则，将API请求路径 `/api` 映射到实际的远程服务器URL `http://www.baidu.com/test`。在打包部署时，需将`/api`替换为实际的服务器地址，以确保跨域问题得到正确处理。

使用http-proxy-middleware 代理解决（项目使用vue-cli脚手架搭建）

例如请求的url:“http://www.baidu.com/test”

打开config/index.js,在proxyTable中添写如下代码：

proxyTable: { 
    '/api': {  //使用"/api"来代替"http://www.baidu.com" 
        target: 'http://www.baidu.com', //源地址 
        changeOrigin: true, //改变源 
        pathRewrite: { 
            '^/api': 'http://www.baidu.com' //路径重写 
        } 
    } 
}