Django+uni-app实现数据通信中的请求跨域的示例代码

下面是Django+uni-app实现跨域请求的完整攻略，包含两个示例：

什么是跨域请求

跨域请求是指在浏览器中，发起的请求的源和目标不在同一个域名下。比如在以 localhost:8080 运行的uni-app中请求 http://localhost:8000 的Django服务器的数据，就是一个跨域请求。由于浏览器会执行同源策略（Same-Origin Policy），默认情况下是不允许跨域请求的。因此，为了在Django和uni-app之间实现跨域请求，我们需要进行一些配置。

Django配置

在Django中，我们需要安装 django-cors-headers 库，并在 settings.py 文件中进行相关配置。安装方法可以使用pip命令进行安装：pip install django-cors-headers。

在 settings.py 文件的 INSTALLED_APPS 中添加 corsheaders 库，以便启用它。然后，在 MIDDLEWARE 中添加 CorsMiddleware 的中间件，以便处理跨域请求。最后，在 CORS_ALLOW_ALL_ORIGINS 选项中添加允许跨域访问的域名列表，支持使用通配符 * 来允许所有域名访问，也支持使用列表的方式。示例代码如下：

INSTALLED_APPS = [
    # ...
    'corsheaders',
    # ...
]

MIDDLEWARE = [
    # ...
    'corsheaders.middleware.CorsMiddleware',
    # ...
]

CORS_ALLOW_ALL_ORIGINS = True # 支持所有跨域访问

# 或者允许列表中的域名跨域访问（示例）
CORS_ALLOWED_ORIGINS = [
    "https://example-1.com",
    "https://example-2.com",
    "http://localhost:8080"
]

CORS_ALLOW_CREDENTIALS = True # 允许跨站点传递身份验证凭据

这样，在Django中完成了跨域请求的配置。

uni-app中的调用

通过Axios库进行跨域请求

Axios是一个常用的HTTP客户端，我们可以使用它来发送跨域请求。在uni-app的 main.js 文件中，引入 Axios 库，并在请求中添加 withCredentials: true 选项，以允许跨站点传递身份验证凭据。示例代码如下：

import axios from 'axios'

// 配置Axios
axios.defaults.baseURL = 'http://localhost:8000'
axios.defaults.withCredentials = true

// 发送跨域请求
axios.post('/api/users/', {
    name: 'Jack',
    age: 20
}).then(response => {
    console.log(response.data)
}).catch(error => {
    console.log(error)
})

通过Jsonp跨域请求

Jsonp是一种允许跨域请求的简单技术。在uni-app中，我们可以使用 vue-jsonp 库来实现Jsonp请求。示例代码如下：

import Vue from 'vue'
import VueJsonp from 'vue-jsonp'

Vue.use(VueJsonp)

// 发送Jsonp请求
Vue.jsonp('http://localhost:8000/api/users/', {
    name: 'Jack',
    age: 20
}).then(response => {
    console.log(response.data)
}).catch(error => {
    console.log(error)
})

这样，在uni-app中也完成了跨域请求的配置。

以上就是Django+uni-app实现数据通信中的请求跨域的示例代码完整攻略，如有不清楚的地方请留言。