uni-app：配置webpack代理，解决跨域问题

最新推荐文章于 2025-11-28 13:52:13 发布

原创最新推荐文章于 2025-11-28 13:52:13 发布 · 8.5k 阅读

5 ·

CC 4.0 BY-SA版权

文章标签：

#web app #webpack #前端

uni-app 专栏收录该内容

10 篇文章

订阅专栏

本文介绍如何在uni-app项目中配置webpack代理，解决跨域问题。通过设置manifest.json中的h5配置，包括路由模式为history，端口为9000，并在devServer下配置proxy代理，将/api请求转发到本地8080端口的mi服务。

uni-app：配置webpack代理，解决跨域问题

1、打开项目文件manifest.json–>h5配置–>路由模式：history–>端口：9000

mode：设置路由的工作模式

mode:‘hash’，哈希模式，默认值。
路由地址栏一直带有一个#。#后面的内容无法被后台获取。
mode:‘history’，历史模式。
去掉路由地址中的#。历史模式必须在后台中进行设置。

端口：只要不与后台端口冲突就可以

2、uni-app官网–>框架–>配置–>manifest.json–>h5–>devServer–>devServer.proxy

就可以查看如何配置了，最终结果如下一步

3、返回项目文件manifest.json–>源码视图：

"h5" : {
        "router" : {
            "mode" : "history"
        },
        "devServer" : {
            "port" : 9000,
			"proxy": {
				"/api": {
				"target": "http://localhost:8080/mi",
				"pathRewrite": {"^/api" : ""}
				}
			 }
        }
    }