uni.request跨域詳解

一、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，在實際開發中，我們需要根據具體的需求選擇對應的跨域配置方式。同時，我們需要注意跨域可能會帶來安全風險，建議在開發中參考相關規範和標準進行開發。