《uniApp - 解决跨域问题》

最新推荐文章于 2025-05-05 14:24:21 发布

一清三白一

最新推荐文章于 2025-05-05 14:24:21 发布

阅读量7.1k

点赞数 11

文章标签： uni-app uniapp 微信小程序安全

本文链接：https://blog.youkuaiyun.com/2301_77272702/article/details/144720520

版权

在 UniApp 开发中，跨域问题是常见的挑战之一，尤其是当你同时开发 App 和 微信小程序 时。这两种平台有各自的跨域处理方式和限制。本文将详细讨论在这两种平台上如何解决跨域问题，并提供可行的解决方案

一、跨域问题的背景

跨域问题是由于浏览器的 同源策略（Same-Origin Policy）引起的。浏览器只允许与当前页面相同源（协议、域名、端口）的请求。如果前端页面向不同源发起请求，就会被浏览器拦截，并提示跨域错误。

在 UniApp 中，由于其跨平台的特性，开发者经常会遇到在 App 和 微信小程序 上访问后端接口时出现的跨域问题。

二、解决方案

1. 在 App 上解决跨域问题

在 App 上，跨域问题通常由 WebView（内嵌浏览器）引起。WebView 使用了浏览器的同源策略，因此如果你使用了 WebView 来展示网页内容或进行接口请求时，跨域问题就会出现。

解决方案：

跨域设置：如果你在 App 中使用了 WebView，最直接的解决办法是后端配置 CORS（跨域资源共享）。这样 WebView 请求时就不会受到跨域限制。
通过代理服务器：你可以使用代理服务器来转发请求，解决跨域问题

uni.request({
  url: 'https://api.example.com/data',
  method: 'GET',
  header: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  },
  success(res) {
    console.log(res.data);
  },
  fail(err) {
    console.log(err);
  }
});

对于 App 开发，通常可以通过服务器端设置 CORS，或者使用中间件来处理跨域请求。

后端 CORS 配置：

以 Node.js 为例，使用 cors 中间件来允许跨域请求。

const express = require('express');
const cors = require('cors');
const app = express();

app.use(cors());  // 允许所有域名的跨域请求

app.get('/api/data', (req, res) => {
  res.json({ message: 'Hello from server' });
});

app.listen(3000, () => console.log('Server is running'));

2. 在微信小程序上解决跨域问题

微信小程序 的跨域处理与浏览器有所不同。小程序不使用浏览器的同源策略，而是使用微信的服务端代理。通常，小程序请求是不会遇到跨域问题的，但在一些特殊情况下（如请求第三方接口），可能会遇到 CORS 问题。

解决方案：

使用小程序的跨域配置：小程序的请求是由微信平台代理的，因此跨域问题通常由微信服务器解决。如果你要请求一个外部 API，并且遇到 CORS 问题，可以考虑配置小程序的合法域名。

在微信小程序中，你需要在 微信公众平台 中设置合法请求域名，允许小程序请求该域名。
1. 登录微信公众平台
2. 进入 小程序管理 → 开发设置 → 服务器域名
3. 添加你的后端服务器域名到 合法域名 列表中

wx.request({
  url: 'https://api.example.com/data',  // 后端接口
  method: 'GET',
  header: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token'
  },
  success(res) {
    console.log(res.data);
  },
  fail(err) {
    console.log(err);
  }
});

说明：

在微信小程序中，只要你将请求的域名加入到合法域名列表中，微信服务器会自动处理跨域问题。
如果后端没有配置 CORS 头部信息，微信平台会对请求进行代理，不会受浏览器的跨域限制。

3. 在 UniApp H5 上解决跨域问题

当你在 UniApp 的 H5 端开发时，浏览器会严格遵守同源策略，因此跨域问题可能会导致请求失败。

解决方案：

使用 vue.config.js 配置代理：对于开发阶段的跨域问题，最常见的做法是通过配置 webpack 的代理来解决。通过配置代理，所有请求都可以转发到目标服务器，从而避免浏览器的跨域限制。

示例 `vue.config.js` 配置：

// vue.config.js
module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://backend-server.com',  // 目标服务器的地址
        changeOrigin: true,                   // 是否更改请求源
        secure: false,                        // 是否接受 HTTPS 请求
        pathRewrite: {
          '^/api': ''                         // 路径重写
        }
      }
    }
  }
}

4. 使用 Nginx 代理服务解决跨域问题

如果你无法修改后端的 CORS 配置，或者需要在多个平台中同时处理跨域问题，可以通过 Nginx 来作为代理服务器。

Nginx 配置示例：

server {
  listen 80;
  server_name example.com;

  location /api/ {
    proxy_pass http://backend-server.com/;  // 将请求代理到后端
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
    proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
  }
}