uniapp 代理proxy配置方法

Uniapp是一款跨平台开发框架，可以快速构建多端应用程序。在使用Uniapp开发时，我们有时需要配置代理（Proxy）以实现跨域访问或访问外部API接口等操作。本教程将介绍在Uniapp中配置代理的方法。

1，创建vue.config.js文件

首先，在Uniapp的根目录下创建一个vue.config.js文件。该文件是Vue CLI的配置文件，Uniapp也可以使用它来进行配置。

2，配置代理

在vue.config.js文件中，我们可以使用devServer选项来配置代理。例如，我们想要访问一个API接口，该接口地址为http://example.com/api，我们可以按照如下方式进行配置：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com',
        changeOrigin: true
      }
    }
  }
}

上述配置中，我们将所有以/api开头的请求都代理到http://example.com上。其中，target属性表示代理的目标地址，changeOrigin属性表示是否改变请求头中的Origin字段，如果设置为true，则会将Origin字段设置为代理的目标地址。

3，测试代理

完成上述配置后，我们可以启动Uniapp应用程序并测试代理是否生效。例如，在我们的应用程序中使用axios发起一个请求：

axios.get('/api/users')
  .then(response => {
    console.log(response.data)
  })
  .catch(error => {
    console.log(error)
  })

上述代码中，我们发起了一个GET请求，请求地址为/api/users。由于我们已经在vue.config.js中配置了代理，请求会被代理到http://example.com/api/users上。如果一切正常，我们应该可以在控制台中看到该请求的响应数据。

4，其他代理配置

除了基本的代理配置外，我们还可以通过配置headers属性来添加自定义请求头：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://example.com',
        changeOrigin: true,
        headers: {
          'X-Requested-With': 'XMLHttpRequest'
        }
      }
    }
  }
}

上述配置中，我们在代理请求时添加了一个自定义请求头X-Requested-With，该请求头的值为XMLHttpRequest。

另外，我们还可以使用pathRewrite属性来重写请求路径。例如，我们想要将所有以/api开头的请求重写为/example/api，我们可以按照如下方式进行配置：

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

上述配置中，我们使用了正则表达式来匹配请求路径，并将/api替换为/example/api。

以上就是在Uniapp中配置代理的详细教程，希望能对你有所帮助。