通过 manifest.json 配置(H5 端)

以请求http://your-api-server.com/api/user/list接口为例

  1. 打开 manifest.json文件
  2. 在 h5节点下添加 devServer配置:
{
  "h5": {
    "devServer": { 
      "proxy": {// 代理转发 
        "/api": {//将你的接口最后公共部分提取出来
          "target": "http://your-api-server.com",// 以/api 开头的代理到 target指定地址 
          "changeOrigin": true,//修改请求头中的 Origin 为目标地址
          "secure": false,// 允许代理到 HTTPS 且证书无效的后端
          "pathRewrite": {
            "^/api": "/api" // 其中请求地址开头的 /api 替换为 '/api' 
          }
        }
      }
    }
  }
}
  1. 配置好代理后,这样发起请求
uni.request({
  url: '/api/user/list', // 注意这里使用相对路径
  success: (res) => {
    console.log(res.data);
  }
});

注意事项

  1. 仅限开发环境​​:这些代理配置只在开发环境(npm run dev)生效,生产环境需要后端配置跨域或使用其他解决方案
  2. ​​多平台兼容​​:H5 平台:代理配置有效,小程序/App 平台:需要直接请求完整URL,或使用条件编译
  3. uni.request() url使用相对路径
  4. 配置完需重启HbuliderX

更多推荐