接口请求封装与跨域处理

与微信小程序的差异

UniApp 需处理 H5 端跨域问题，小程序端不存在跨域限制。封装时需考虑：

1. 基础封装示例

// request.js
export default function request(options) {
    const baseUrl = process.env.NODE_ENV === 'development'
        ? '/api'
        : 'https://prod.api.com'

    return new Promise((resolve, reject) => {
        uni.request({
            url: baseUrl + options.url,
            method: options.method || 'GET',
            data: options.data,
            header: {
                'Content-Type': 'application/json',
                ...options.header
            },
            success: (res) => {
                if (res.statusCode === 200) {
                    resolve(res.data)
                } else {
                    reject(new Error(`请求错误: ${res.statusCode}`))
                }
            },
            fail: (err) => reject(err)
        })
    })
}

2. H5 端跨域配置（vue.config.js）

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

3. 生产环境处理

• App 端：通过原生打包配置忽略证书验证（仅测试环境）
• 小程序端：配置合法域名
• H5 端：服务端配置 CORS 策略