uni-app H5跨域问题解决方案（CORS、Cross-Origin）

uni-app H5跨域问题解决方案（CORS、Cross-Origin）

什么是跨域

跨域是浏览器的专用概念，指js代码访问自己来源站点之外的站点。比如A站点网页中的js代码，请求了B站点的数据，就是跨域。

A和B要想被认为是同域，则必须有相同的协议（比如http和https就不行）、相同域名、和相同端口号（port）。

如果你是做App、小程序等非H5平台，是不涉及跨域问题的。

稍微例外的是iOS的wkWebview，在5+App，或uni-app的web-view组件及renderjs中，由于WKWebview限制也会产生跨域，这方面另见专题文章：https://ask.dcloud.net.cn/article/36348。uni-app在App的普通js代码不运行在Webview下，不存在跨域问题。

由于uni-app是标准的前后端分离模式，开发h5应用时如果前端代码和后端接口没有部署在同域服务器，就会被浏览器报跨域。

如果前端要callfunction连接unicloud云函数

在h5页面里callfunction会跨域，此时需在unicloud的web控制台配置域名白名单，被加白的域名可以跨域callfunction。详见：https://uniapp.dcloud.net.cn/uniCloud/quickstart?id=useinh5

另外运行期间在HBuilderX的内置浏览器里是不存在跨域的。

如果前端要连接传统后台服务器

分部署时的跨域方案和调试时的跨域方案，具体见下：

部署时的跨域解决方案

  • 方案1：最利索的，当然还是将前端代码和后端接口部署在同域的web服务器上
  • 方案2：由后台服务器配置策略，设为允许跨域访问。

例如：前端页面部署在uniCloud的前端页面托管里，但是需要访问自己服务器的接口，这时候需要在服务端允许前端页面托管的域名跨域访问。不同的服务端框架允许跨域的配置不一样，这里不再一一列举仅以eggjs为例。

(1) 安装egg-cors包

npm i egg-cors --save

(2) 在plugin.js中设置开启cors

exports.cors = {  
  enable: true,  
  package: 'egg-cors',  
};

(3) 在config.default.js中配置

config.security = {  
  domainWhiteList: [ '前端网页托管的域名' ],  
};

更多关于uni-app H5跨域问题解决方案（CORS、Cross-Origin）的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于uni-app H5跨域问题解决方案（CORS、Cross-Origin）的实战教程也可以访问 https://www.itying.com/category-93-b0.html


在uni-app中处理H5跨域问题（CORS, Cross-Origin Resource Sharing）时，通常需要在服务器端进行配置，允许特定的源访问资源。虽然客户端（uni-app）可以通过一些代理方法绕过跨域限制，但最佳实践还是在服务器端进行配置。下面是一个简单的服务器端配置示例，以及如何在uni-app中进行请求的示例代码。

服务器端配置示例（以Node.js和Express为例）

首先，确保你已经安装了cors中间件：

npm install cors

然后，在你的Express应用中配置CORS：

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

// 允许所有来源的跨域请求（为了安全，建议限制具体域名）
const corsOptions = {
  origin: '*', // 可以替换为特定的域名，如 'https://example.com'
  methods: 'GET,HEAD,PUT,PATCH,POST,DELETE',
  credentials: true
};

app.use(cors(corsOptions));

app.get('/api/data', (req, res) => {
  res.json({ message: 'This is CORS-enabled for all origins!' });
});

app.listen(3000, () => {
  console.log('CORS-enabled web server listening on port 3000');
});

uni-app 客户端请求示例

在uni-app中，你可以使用uni.request来进行HTTP请求。以下是一个简单的请求示例：

uni.request({
  url: 'http://localhost:3000/api/data', // 替换为你的服务器地址
  method: 'GET',
  header: {
    'content-type': 'application/json'
  },
  success: (res) => {
    console.log('请求成功：', res.data);
  },
  fail: (err) => {
    console.error('请求失败：', err);
  }
});

注意事项

  1. 安全性：在生产环境中，不要将origin设置为'*'，应限制为特定的域名，以提高安全性。
  2. 凭证：如果需要携带凭证（如Cookies），确保credentials选项设置为true，并且前端和后端的Access-Control-Allow-Origin不能是通配符（*），需要指定具体的域名。
  3. 代理：如果出于某些原因，无法修改服务器端的CORS配置，可以在开发环境中使用代理服务器（如Webpack的devServer代理）来绕过跨域限制。但在生产环境中，应尽量避免使用代理，直接在服务器端进行配置。

通过上述配置，你可以在uni-app中顺利地处理H5跨域问题。

回到顶部