uniapp vue3 h5 跨域

### UniApp Vue3 H5 跨域解决方案 在 UniApp 的 H5 环境中，跨域问题是一个常见的开发挑战。以下是基于 Vue3 和 H5 环境的跨域解决方案： #### 1. 配置 `manifest.json` 文件 在项目的 `manifest.json` 文件中，找到 `h5` 配置项，并添加代理规则。以下是一个完整的配置示例： ```json "h5": { "devServer": { "proxy": { "/api": { // 定义了一个代理规则，匹配所有以 "/api" 开头的请求路径 "target": "https://your-api-domain.com", // 目标服务器地址 "changeOrigin": true, // 修改请求头中的 host 字段 "pathRewrite": { "^/api": "" // 移除请求路径中的 "/api" 前缀 } } } } } ``` 通过上述配置，所有以 `/api` 开头的请求将被代理到指定的目标服务器[^1]。 #### 2. 请求代码调整 在使用 `uni.request` 或其他 HTTP 请求库时，需要确保请求路径与代理规则一致。例如，如果代理规则定义为 `/api`，则请求路径应包含该前缀： ```javascript uni.request({ url: '/api/your-endpoint', // 请求路径需与代理规则匹配 method: 'GET', success(res) { console.log('请求成功:', res); }, fail(err) { console.error('请求失败:', err); } }); ``` #### 3. 注意事项 - **目标服务器支持 CORS**：即使设置了代理规则，目标服务器仍需正确配置跨域资源共享（CORS）。如果目标服务器不支持 CORS，则代理规则可能无法生效[^4]。 - **生产环境处理**：代理规则仅适用于开发环境。在生产环境中，建议通过后端服务或 Nginx 配置实现反向代理[^3]。 #### 4. 示例代码 以下是一个完整的跨域请求示例： ```javascript // 在 manifest.json 中配置代理规则 "h5": { "devServer": { "proxy": { "/api": { "target": "https://your-api-domain.com", "changeOrigin": true, "pathRewrite": { "^/api": "" } } } } } // 在页面中发起请求 export default { methods: { fetchData() { uni.request({ url: '/api/data', // 请求路径需与代理规则匹配 method: 'GET', success(res) { console.log('获取数据成功:', res.data); }, fail(err) { console.error('获取数据失败:', err); } }); } } }; ``` ###