uniapp使用H5调试时跨域问题解决

下面我来详细讲解如何在uniapp中使用H5调试时解决跨域问题。

背景介绍

在uniapp项目中，有时我们需要在H5模式下进行开发调试。但是，由于H5的安全策略限制，常会出现跨域问题导致无法正常显示页面或获取数据的情况，特别是对于与服务器接口交互的场景。本文将介绍如何解决uniapp项目在H5模式调试时跨域问题。

解决方案

uniapp项目在H5模式调试时，可以通过配置vue.config.js文件实现跨域。

方案一

在vue.config.js文件中添加以下内容：

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080', // 修改为自己的服务器地址
        changeOrigin: true,
        pathRewrite: {
          '^/api': ''
        }
      }
    }
  }
}

上述代码中，我们使用了proxy代理模式，将所有以/api开头的请求转发到目标服务器地址，这里以本地地址为例。其中，changeOrigin设置为true，表示跨域请求时不需要添加origin请求头；pathRewrite用于对请求路径进行重写，将/api开头的请求路径替换为空，例如将/api/user请求重写为/user。通过这样的配置，我们可以在H5模式下调试uniapp项目，与服务器接口交互时避免跨域问题。

方案二

如果项目中存在非/api开头的请求路径，或者使用第三方接口时需要添加特定的请求头，可以使用http-proxy-middleware库实现更精细的跨域设置。

首先，安装http-proxy-middleware库：

npm install http-proxy-middleware --save-dev

接着，修改vue.config.js文件：

const proxyMiddleware = require('http-proxy-middleware')

module.exports = {
  devServer: {
    before(app) {
      app.use(
        '/api',
        proxyMiddleware({
          target: 'http://localhost:8080', // 修改为自己的服务器地址
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          },
          headers: {
            Authorization: 'Bearer token' // 设置请求头
          }
        })
      )
    }
  }
}

上述代码中，我们使用了http-proxy-middleware库，通过before方法将所有以/api开头的请求路径映射到目标服务器地址。在http-proxy-middleware中，我们可以自定义更多的配置内容，包括headers等。这样，我们就可以在uniapp项目中使用H5模式进行开发调试，同时处理跨域问题。

示例说明

下面来看两个示例说明，说明以上两种方案的具体实现方法。

示例一

假如我们有一个uniapp项目，需要与后端服务器进行数据交互，在H5模式下进行开发调试。使用uni.request向服务器发送GET请求时，报错提示“跨域请求被拒绝”，无法获取数据。此时，我们可以在vue.config.js文件中添加proxy代理设置，将/api开头的请求路径转发到目标服务器地址。

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

添加上述代码后，我们就可以在H5模式下进行开发调试了，通过uni.request向服务器发送GET请求时，可以正常获取数据。

示例二

假如我们需要使用第三方接口时，需要在请求头中添加特定的Authorization信息。此时，我们可以使用http-proxy-middleware库，配置更精细化的代理转发。

const proxyMiddleware = require('http-proxy-middleware')

module.exports = {
  devServer: {
    before(app) {
      app.use(
        '/api',
        proxyMiddleware({
          target: 'http://localhost:8080',
          changeOrigin: true,
          pathRewrite: {
            '^/api': ''
          },
          headers: {
            Authorization: 'Bearer token' // 设置请求头
          }
        })
      )
    }
  }
}

添加上述代码后，我们就可以在H5模式下进行开发调试，并在向第三方接口发送请求时添加Authorization请求头信息，实现更加完善的跨域请求。