在 uni-app 中怎么设置本地反向代理？

设置本地反向代理的步骤：

1. 创建或修改 vue.config.js 文件

在你的 uni-app 项目根目录下，创建一个 vue.config.js 文件（如果已经存在则进行修改），并添加以下配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:3000', // 目标 API 服务器
        changeOrigin: true, // 允许跨域
        pathRewrite: {
          '^/api': '' // 重写路径
        }
      }
    }
  }
}

Copy
JavaScript

2. 解释配置项

   • /api: 这是你在前端代码中请求的路径前缀。
   • target: 设置你要代理的目标地址，比如你的后端服务的地址。
   • changeOrigin: 是否改变原始主机头为目标 URL。
   • pathRewrite: 重写路径，可以根据需要修改请求路径。

3. 在项目中使用代理请求

在你的代码中，可以这样发送请求，使用 /api 作为前缀：

uni.request({
  url: '/api/data', // 实际请求会被代理到 http://localhost:3000/data
  method: 'GET',
  success: (res) => {
    console.log('响应数据:', res.data);
  },
  fail: (err) => {
    console.error('请求失败:', err);
  }
});

Copy
JavaScript

4. 重启开发服务器

在进行上述配置后，记得重启你的 uni-app 开发服务器以使配置生效。

标签：
来源：