uniapp h5 跨域问题怎么解决

可以使用代理的方式解决跨域问题。在项目的 `config/index.js` 文件中配置代理即可。

例如：

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

这样，所有以 `/api` 开头的请求都会被代理到 `http://xxxxx.com`。这样就能解决跨域问题了。

或者使用 CORS 解决跨域问题,在后台配置Access-Control-Allow-Origin，允许跨域的地址。

相关问题

uniapp h5跨域

在App 中，处理 H5 跨域问题可以通过配置 `manifest.json` 文件来实现。你可以按照以下步骤进行操作：

1. 在项目根目录下找到 `manifest.json` 文件。
2. 在 `"h5"` 字段下添加 `"customRoutes"` 字段，并在该字段下添加需要进行跨域的路径。

举个例子，如果你需要跨域访问 `http://api.example.com` 下的接口，你可以这样配置：

{
  "h5": {
    "customRoutes": {
      "/api": "http://api.example.com"
    }
  }
}

这样，在 H5 环境中访问 `/api` 路径下的接口时，就会自动转发到 `http://api.example.com`。

需要注意的是，如果你的接口需要进行身份验证，需要在后端配置允许跨域请求，并设置合适的跨域头部信息。另外，如果你的接口使用了 HTTPS 协议，H5 环境访问时可能会有一些限制，需要在服务器配置 SSL 证书。

希望能帮到你！如有任何疑问，请随时追问。

uniapp H5 跨域

### 解决 UniApp H5 跨域请求问题

#### 修改 `manifest.json` 文件配置
对于 UniApp 开发中的 H5 应用，在遇到跨域访问资源时，可以在项目的根目录下找到并编辑 `manifest.json` 文件。在该文件内的特定位置添加或调整用于开发服务器设置的部分，具体是在 `"h5"` 对象下的 `"devServer"` 中加入代理配置来解决问题[^1]。

"h5": {
    "devServer": {
        "port": 8080,
        "disableHostCheck": true,
        "proxy": {
            "/api": {
                "target": "http://example.com",
                "changeOrigin": true,
                "secure": false,
                "pathRewrite": {
                    "^/api": ""
                }
            }
        }
    }
}

上述 JSON 片段展示了如何通过指定目标 URL (`target`) 和其他选项（如是否更改源(`changeOrigin`)、安全设置(`secure`)）来进行反向代理设置，从而绕过浏览器同源策略限制[^5]。

#### 使用 `uni.request()` 方法发起请求
当构建基于 Vue 的应用时，比如使用 UniApp 构建的应用程序，可以利用框架内置的 `uni.request()` 函数发送网络请求。为了确保这些请求能够成功跨越不同源之间的边界，应当按照官方文档建议的方式编写代码[^2]：

uni.request({
    url: '/public/shoplist',
    success(res) {
        console.log('Request succeeded:', res);
    },
    fail(err) {
        console.error('Request failed:', err);
    }
});

这里需要注意的是，如果已经设置了前面提到的代理规则，则这里的相对路径 `/public/shoplist` 实际上会被转发给后台服务端的实际 API 地址。

#### 封装统一的请求模块
考虑到实际项目中可能既包含 H5 又有 App 请求的需求，因此推荐创建一个独立的 JavaScript 文件 (例如命名为 `request.js`) 来集中管理所有的 HTTP 请求逻辑，并实现两者间的兼容性处理[^3]。

const BASE_URL = process.env.NODE_ENV === 'development' ? '/dev-api' : '';

export default function request(options) {
    const { url, method = 'GET', data = {} } = options;
    
    return new Promise((resolve, reject) => {
        uni.request({
            url: `${BASE_URL}${url}`,
            method,
            data,
            success(response) {
                resolve(response.data);
            },
            fail(error) {
                reject(error);
            }
        });
    });
}

// Usage example within a page or component:
import request from './utils/request';

async function fetchShopList() {
    try {
        const result = await request({ url: '/shoplist' });
        console.log(result);
    } catch (error) {
        console.error(error);
    }
}

这段代码片段展示了一个简单的封装方式，它可以根据当前环境变量自动切换基础 URL 前缀，使得无论是本地调试还是生产环境中都能正常工作；同时也简化了页面组件内部调用接口的过程。