在现代的 Web 开发中，跨域问题是一个经常遇到的问题。在使用 UniApp 和 Vue3 开发 H5 应用时，同样会面临浏览器的同源策略限制，从而导致跨域请求失败。本文将介绍如何在 UniApp 的 Vue3 环境下解决跨域问题，并给出相应的代码示例。
什么是跨域？
跨域指的是在一个域名的网页中请求另一个域名的资源，这通常被浏览器的同源策略限制。同源策略的定义是：协议、域名、端口必须完全相同。否则，浏览器会阻止这种请求，从而导致跨域问题。
解决跨域的方法
解决跨域问题的方法有很多，常见的有以下几种：
-
CORS（Cross-Origin Resource Sharing）：这是现代浏览器非常推荐的一种解决方案。服务器可以通过设置响应头来允许特定的域名访问。
-
JSONP（JSON with Padding）：通过动态插入
<script>标签的方式解决跨域，但只支持 GET 请求，现已不太常用。 -
代理（Proxy）：可以在开发环境中配置代理，通过开发服务器转发请求，绕过浏览器的跨域限制。
接下来，我们重点介绍如何通过 CORS 和代理来解决 UniApp 中的跨域问题。
使用 CORS 解决跨域
如果你控制服务器端，可以通过设置服务器的响应头来允许跨域请求。例如，在 Node.js 的 Express 服务器中，你可以这样设置：
const express = require('express');
const cors = require('cors');
const app = express();
// 允许所有域名的跨域请求
app.use(cors());
app.get('/api/data', (req, res) => {
res.json({ msg: '这是一条跨域返回的数据' });
});
app.listen(3000, () => {
console.log('Server running on http://localhost:3000');
});
客户端使用 UniApp 进行请求：
uni.request({
url: 'http://localhost:3000/api/data',
method: 'GET',
success: (res) => {
console.log(res.data);
},
fail: (err) => {
console.error(err);
}
});
以上代码中，我们在服务器端使用了 CORS 中间件，允许所有域的请求。客户端可以顺利请求到数据。
使用代理解决跨域
如果你无法修改服务器，或者是在开发阶段，可以通过设置开发环境中的代理来解决跨域问题。
在 vue.config.js 中配置代理：
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
pathRewrite: { '^/api': '' },
},
},
},
};
在这个配置中，一旦客户端请求 /api/data，开发服务器会将请求转发到 http://localhost:3000/data，从而避免了跨域问题。
客户端发起请求的代码保持不变：
uni.request({
url: '/api/data', // 这里的路径是代理后的路径
method: 'GET',
success: (res) => {
console.log(res.data);
},
fail: (err) => {
console.error(err);
}
});
总结
在 UniApp 和 Vue3 中解决跨域问题的方法主要有 CORS 和代理两种。CORS 是最为推荐的方法，适用于你能控制的服务器环境。而在遇到无法修改服务器配置的情况下，使用开发代理也是一个很好的解决方案。结合业务场景选择合适的方案，能有效避免跨域带来的问题。在实际项目中，生产环境一般会依赖于后端设置 CORS，而开发过程中的代理设置则非常方便。
