uni-app proxy代理配置 uni-app H5开发如何解决跨域-uni-app-PHP中文网

uni-app H5 的 proxy 配置必须在 vue.config.js 的 h5.devServer.proxy 下设置，仅对相对路径请求生效，且仅用于开发环境；生产环境需用真实域名或 Nginx 代理。

uni-app H5 用 `vue.config.js` 配置 proxy 不生效？

因为 uni-app 的 h5 模式不走 vue cli 的 devserver，vue.config.js 里的 devserver.proxy 完全被忽略。你改了也没用，启动时根本不会读它。

真正起作用的是 vue.config.js 中的 configureWebpack 或 chainWebpack 配合 webpack-dev-server 的 proxy 选项——但仅限于 H5 平台，并且必须在 h5 节点下配置。

只对 npm run serve -- --mode h5 有效，其他平台（如小程序）无视该配置
代理目标地址必须写完整协议+域名，比如 https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39，不能只写 /api
路径重写要用 pathRewrite（webpack 4）或 rewrite（webpack 5），uni-app 3.0+ 默认用 webpack 5，所以得用 rewrite

module.exports = {
  h5: {
    devServer: {
      proxy: {
        '/api': {
          target: 'https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39',
          changeOrigin: true,
          rewrite: (path) => path.replace(/^\/api/, '')
        }
      }
    }
  }
}

请求发出去了，但浏览器控制台仍报跨域错误？

说明代理没命中，请求根本没走到本地 devServer，而是直接发给了原始域名。常见原因是前端请求 URL 写死了绝对地址，绕过了代理规则。

比如你在代码里写了 axios.get('https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39/user')，那无论 proxy 怎么配都没用——这是浏览器直连，不是走 webpack-dev-server 代理。

所有请求必须用相对路径，如 axios.get('/api/user')，才能匹配 /api 代理前缀
如果后端接口本身带 cookie 或需要凭证，记得加 withCredentials: true，同时后端要响应 Access-Control-Allow-Credentials: true
代理只在开发环境生效，生产环境需 Nginx 或其它反向代理承接，不能依赖前端配置

uni-app 条件编译下 H5 和小程序共用一套 API 请求逻辑？

可以，但得靠条件编译隔离基础 URL，而不是让 proxy 承担多环境职责。

proxy 只是开发阶段的调试手段，上线后 H5 要走真实域名，小程序则受限于自身域名校验机制，压根不走 proxy。混用会导致 H5 生产环境 404、小程序请求失败。

Umbrel Proxy Manager

高效管理与交互 Umbrel 代理服务，支持 Docker 容器。自动发现运行服务，将内部 Docker IP 映射为可访问的外部地址。

下载

H5 开发：用 /api 前缀 + proxy 代理
H5 生产：通过 process.env.NODE_ENV === 'production' 切换为真实域名
小程序：用 #ifdef MP-WEIXIN 直接写合法的 request 合法域名，不经过 proxy

// api/request.js
const baseURL = process.env.NODE_ENV === 'development'
  ? '/api'
  : 'https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39';
<p>// #ifdef MP-WEIXIN
const baseURL = '<a href="https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39">https://www.php.cn/link/710ba53b0d353329706ee1bedf4b9b39</a>';
// #endif</p>

代理转发后，后端收到的 `Host` 头还是 localhost？

默认会，这可能导致后端鉴权失败或 CDN 路由异常。需要显式设置 host 头透传。

webpack-dev-server 的 proxy 默认不修改 Host，得手动加 headers 配置把原始 host 带过去，或者干脆用 changeOrigin: false 配合后端接受 localhost 请求（不推荐）。

推荐做法：加 headers: { Host: 'api.example.com' } 强制覆盖
注意 changeOrigin: true 会让 Host 自动设为目标域名，但某些 CDN 或网关会校验 Host 是否匹配 SNI，这时反而要关掉它，手动控制
如果后端依赖 X-Forwarded-For 获取真实 IP，proxy 默认不加，需额外配置 onProxyReq 注入

代理这件事，核心就一条：它只在 H5 开发时起效，且只对相对路径请求有效。一旦路径写死、环境切错、或想让它管生产流量，问题就从“配不配得对”变成“为什么根本没走代理”。