uni.request跨域详解

NNZT • 2024-10-04 00:15 • 编程

一、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如何实现跨域请求，示例代码如下：



    
        uni.request跨域实战
        
            
                {{ item.title }}
            
        
    



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);
                }
            });
        }
    }
}


// 服务端代码
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);

在本示例中我们在服务端设置Access-Control-Allow-Origin头信息，允许前端跨域请求。前端通过uni.request发送请求，获取到服务器返回的数据，展示在页面中。

四、总结

uni.request是非常实用的网络请求API，在实际开发中，我们需要根据具体的需求选择对应的跨域配置方式。同时，我们需要注意跨域可能会带来安全风险，建议在开发中参考相关规范和标准进行开发。

原创文章，作者：NNZT，如若转载，请注明出处：https://www.506064.com/n/136216.html