当前位置：首页 > uni-app

uniapp服务器代理

2026-02-06 17:10:07uni-app

uniapp服务器代理配置方法

在uniapp中配置服务器代理主要涉及修改manifest.json和vue.config.js文件，以下是具体实现方式：

开发环境配置 修改项目根目录下的vue.config.js文件，添加devServer配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://your-backend-server.com',
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

生产环境配置 在manifest.json文件中配置网络请求白名单：

{
  "networkTimeout": {
    "request": 60000,
    "connectSocket": 60000,
    "uploadFile": 60000,
    "downloadFile": 60000
  },
  "app-plus": {
    "distribute": {
      "network": {
        "domain": "your-backend-server.com"
      }
    }
  }
}

跨平台代理方案处理

不同平台对代理的支持程度不同，需要针对性处理：

H5平台 直接使用vue-cli的devServer代理配置即可，如前文所述。

小程序平台 需要在各小程序后台配置request合法域名：

微信小程序：开发设置→服务器域名
支付宝小程序：设置→开发设置→服务器域名白名单

APP平台 需要配置https请求或使用native.js处理网络请求，推荐使用uni.request的正式域名配置。

常见问题解决方案

代理不生效检查 确认是否运行在开发环境，生产环境不会应用devServer配置；检查请求路径是否匹配代理规则；查看控制台Network面板确认请求实际地址。

多环境代理配置 可通过环境变量区分不同代理目标：

const target = process.env.NODE_ENV === 'development' 
  ? 'http://dev.server.com' 
  : 'http://prod.server.com'

module.exports = {
  devServer: {
    proxy: {
      '/api': { target }
    }
  }
}

HTTPS证书问题 当代理目标使用HTTPS且证书不合法时，可添加rejectUnauthorized配置：

proxy: {
  '/api': {
    target: 'https://your-server.com',
    secure: false,
    changeOrigin: true
  }
}

高级代理配置技巧

多路径代理 可为不同接口路径配置不同代理目标：

proxy: {
  '/api1': {
    target: 'http://server1.com',
    pathRewrite: {'^/api1': ''}
  },
  '/api2': {
    target: 'http://server2.com',
    pathRewrite: {'^/api2': ''}
  }
}

WebSocket代理 支持WebSocket连接的代理配置：

proxy: {
  '/socket': {
    target: 'ws://your-websocket-server',
    ws: true,
    changeOrigin: true
  }
}

自定义代理规则 通过bypass函数实现复杂代理逻辑：

uniapp服务器代理

proxy: {
  '/api': {
    target: 'http://backend.example.com',
    bypass: function(req, res, proxyOptions) {
      if (req.headers.accept.indexOf('html') !== -1) {
        return '/index.html'
      }
    }
  }
}