UniApp H5开发实战：跨域代理配置全解析（manifest.json与vue.config.js双方案）

1. UniApp H5开发中的跨域问题解析

第一次用UniApp开发H5页面时，我兴冲冲地写好了接口请求代码，结果浏览器控制台突然跳出一行刺眼的红色报错："Access-Control-Allow-Origin"。这个场景相信很多开发者都遇到过，特别是在前后端分离的开发模式下，跨域问题就像一道必须跨过的门槛。

跨域问题本质上是一个安全机制。浏览器出于安全考虑，会阻止不同源（协议、域名、端口任一不同）的请求响应。举个例子，如果你的H5页面运行在http://localhost:8080，而接口服务部署在http://api.example.com，这就构成了跨域。

在UniApp的H5开发中，这个问题尤为突出。因为开发阶段我们通常用本地服务器调试，而接口可能部署在测试环境或生产环境。这时候就需要代理配置来绕过浏览器的同源策略限制。代理的工作原理很简单：让同域的服务器帮你转发请求到目标服务器，这样浏览器就不会拦截了。

2. manifest.json配置方案详解

2.1 配置步骤

manifest.json是UniApp项目的核心配置文件，它提供了H5开发服务器的代理配置选项。我推荐先在HBuilderX中打开manifest.json文件，切换到"源码视图"模式，这样可以直接编辑JSON内容。

找到或添加h5配置项，在其中加入devServer配置。这里有个小技巧：如果你不确定配置位置，可以直接在JSON顶层添加"h5"字段。完整的配置示例如下：

json复制"h5": {
  "devServer": {
    "disableHostCheck": true,
    "proxy": {
      "/api": {
        "target": "http://your-api-domain.com",
        "changeOrigin": true,
        "secure": false,
        "ws": false,
        "pathRewrite": {
          "^/api": ""
        }
      }
    }
  }
}

2.2 参数解析

每个配置参数都有其特定作用：

• **disableHostChec