博客站

在 UniApp 中，跨域问题主要出现在 H5 平台 上，因为浏览器有同源策略的限制。对于其他平台（如小程序、App），跨域问题通常由平台自身处理，开发者无需额外配置。以下是 UniApp 处理跨域问题的几种方法：

一、H5 平台的跨域问题

在 H5 平台中，跨域问题通常是由于请求的目标地址与当前页面的域名、协议或端口不一致导致的。以下是常见的解决方案：

1. 使用代理服务器

• 在开发环境中，可以通过配置代理服务器解决跨域问题。
• 在 manifest.json 中配置代理：

  {
    "h5": {
      "devServer": {
        "proxy": {
          "/api": {
            "target": "https://example.com",
            "changeOrigin": true,
            "pathRewrite": { "^/api": "" }
          }
        }
      }
    }
  }
  

• 在代码中请求时，使用 /api 作为前缀：

  uni.request({
    url: '/api/data',
    success: (res) => {
      console.log(res.data);
    }
  });
  

2. 后端配置 CORS

• 让后端服务器配置 CORS（跨域资源共享），允许指定的域名访问。
• 示例（Node.js）：

  const express = require('express');
  const app = express();
  app.use((req, res, next) => {
    res.header('Access-Control-Allow-Origin', '*');
    res.header('Access-Control-Allow-Headers', 'Content-Type');
    next();
  });
  app.get('/data', (req, res) => {
    res.json({ message: 'Hello UniApp' });
  });
  app.listen(3000);
  

3. JSONP

• 对于不支持 CORS 的接口，可以使用 JSONP 方式请求。
• 示例：

  uni.request({
    url: 'https://example.com/data?callback=handleResponse',
    dataType: 'jsonp',
    success: (res) => {
      console.log(res.data);
    }
  });
  

4. Nginx 反向代理

• 在生产环境中，可以通过 Nginx 配置反向代理解决跨域问题。
• 示例配置：

  server {
      listen 80;
      server_name yourdomain.com;
  
      location /api {
          proxy_pass https://example.com;
          proxy_set_header Host $host;
          proxy_set_header X-Real-IP $remote_addr;
      }
  }
  

二、小程序平台的跨域问题

小程序平台没有浏览器的同源策略限制，但需要在小程序后台配置 合法域名。

1. 配置合法域名

• 登录微信小程序后台，进入 开发 → 开发设置 → 服务器域名。
• 在 request 合法域名中添加目标域名。

2. 注意事项

• 小程序要求所有请求的域名必须为 HTTPS。
• 本地开发时可以使用 不校验合法域名 选项（在开发者工具中设置）。

三、App 平台的跨域问题

在 App 平台中，跨域问题通常由平台自身处理，开发者无需额外配置。如果需要访问外部资源，可以直接使用 uni.request。

1. 直接请求

• 示例：

  uni.request({
    url: 'https://example.com/data',
    success: (res) => {
      console.log(res.data);
    }
  });
  

2. 注意事项

• 如果目标服务器不支持 HTTPS，需要在 manifest.json 中配置允许 HTTP 请求：

  {
    "app-plus": {
      "ssl": {
        "verify": false
      }
    }
  }
  

四、总结

UniApp 处理跨域问题的方式因平台而异：

• H5 平台：通过代理服务器、CORS、JSONP 或 Nginx 反向代理解决。
• 小程序平台：配置合法域名。
• App 平台：直接请求，无需额外配置。

以下是一个完整的示例，展示了在 H5 平台中使用代理服务器解决跨域问题：

1. 配置代理

在 manifest.json 中：

{
  "h5": {
    "devServer": {
      "proxy": {
        "/api": {
          "target": "https://example.com",
          "changeOrigin": true,
          "pathRewrite": { "^/api": "" }
        }
      }
    }
  }
}

2. 发起请求

在代码中：

uni.request({
  url: '/api/data',
  success: (res) => {
    console.log(res.data);
  }
});

通过以上方法，可以有效解决 UniApp 中的跨域问题，确保应用在不同平台上正常运行。