一、uni.request跨域介绍
uni.request是uni-app框架提供的网络请求API,用于前端向服务端发送请求获取数据,实现前后端交互。但是在实际开发中,可能会遇到跨域问题。跨域是指从一个域名的网页去请求另一个域名的资源,这种情况下浏览器会拦截请求。
uni-app提供了uni.request的封装,可以很方便的实现跨域请求。
二、uni.request跨域配置
uni.request的跨域配置分为两种情况,分别是前端跨域和服务端跨域。
1、前端跨域
前端跨域需要在服务端端设置HTTP响应头信息允许跨域请求。通常需要设置Access-Control-Allow-Origin,允许指定前端域名(也可以使用*表示所有域名),如下代码:
// node.js服务端代码 const http = require('http'); http.createServer(function(req, res) { res.setHeader('Access-Control-Allow-Origin', '*'); // 允许跨域请求 res.writeHeader(200); res.end('hello world'); }).listen(3000);
然后可以在前端代码中使用uni.request发送请求,如下所示:
uni.request({ url: 'http://localhost:3000', success: function (res) { console.log(res); }, fail: function (err) { console.log(err); } });
2、服务端跨域
服务端跨域需要使用反向代理或者jsonp技术。这里我们使用Nginx做反向代理,将前端请求代理到对应的后端服务,如下所示:
server { listen 80; server_name localhost; location /api { proxy_pass http://127.0.0.1:3000/; add_header 'Access-Control-Allow-Origin' '*'; } }
在前端代码中可以使用uni.request发送请求,请求地址为http://localhost/api,如下所示:
uni.request({ url: 'http://localhost/api', success: function (res) { console.log(res); }, fail: function (err) { console.log(err); } });
三、uni.request跨域实战
下面我们通过一个示例来演示uni.request如何实现跨域请求,示例代码如下:
<script> export default { data() { return { list: [] }; }, mounted() { this.requestData(); }, methods: { requestData() { uni.request({ url: 'http://localhost:3000/api', success: res => { console.log(res); this.list = res.data.data; }, fail: err => { console.log(err); } }); } } } </script> // 服务端代码 const http = require('http'); const data = [ { title: 'uni.request跨域实战1' }, { title: 'uni.request跨域实战2' }, ]; http.createServer(function(req, res) { res.setHeader('Access-Control-Allow-Origin', '*'); // 允许跨域请求 res.writeHeader(200); res.end(JSON.stringify({ code: 200, message: 'success', data: data })); }).listen(3000); uni.request跨域实战 {{ item.title }}
在本示例中我们在服务端设置Access-Control-Allow-Origin头信息,允许前端跨域请求。前端通过uni.request发送请求,获取到服务器返回的数据,展示在页面中。
四、总结
uni.request是非常实用的网络请求API,在实际开发中,我们需要根据具体的需求选择对应的跨域配置方式。同时,我们需要注意跨域可能会带来安全风险,建议在开发中参考相关规范和标准进行开发。