Django+uni-app实现数据通信中的请求跨域(后端使用Django RestFramework，前端使用uni-

工具: Hbuilder、PyCharm 环境: Mac

在前后端分离的模式下 (后端使用Django RestFramework，前端使用uni-app)来进行APP的开发。

前端ubi-app代码：

User1.vue

<template>
  <div id="user">
    <br>
<!--    {{django_message}}
 -->  </div>
</template>

<script>
uni.request({
    url: 'http://127.0.0.1:8000/test/', //仅为示例，并非真实接口地址。
    data: {
		text: 'uni.request'
    },
    header: {
		'content-type': 'application/json'		
    },
	
    success: (res) => {
        console.log(res.data);
		// this.text = 'request success';
  //   
  }
});
</script>

<stype scoped>

</stype>

Django后端跨域配置 settings.py配置文件中添加：

INSTALLED_APPS = [

'corsheaders',
]

中间件中添加

'corsheaders.middleware.CorsMiddleware', #注意顺序一定是在common中间件的前面

MIDDLEWARE = [

# 'accounts.MyCsrfMiddleware.CORSMiddleware',
# 注意顺序 一定是在common中间件的前面
'corsheaders.middleware.CorsMiddleware',
'django.middleware.security.SecurityMiddleware',
'django.contrib.sessions.middleware.SessionMiddleware',
'django.middleware.common.CommonMiddleware',
]

settings.py最末尾添加：

CORS_ORIGIN_ALLOW_ALL = True

允许携带cookie:

CORS_ALLOW_CREDENTIALS = True

测试跨域访问是否成功的视图函数

def test(request):
    return JsonResponse({"status": 0, "message": "This is Django Message！"})

URL

from django.contrib import admin

from django.urls import path
from django.conf.urls import url, include

urlpatterns = [

    # test ok
    url(r'test/', views.test),

]

测试，在Hbuilder中启动前端项目，同时后端项目也启动

问题

原因

主要是请求头的问题

继续改进

前面是解决前后端跨域访问的问题，现在尝试获取后台传递给前端的数据，后端代码不变，前端User1.vue代码需要变动。

从后端【根据views.py中的test视图函数】传递一个名为message的字符串给前端，对前端的User1.vue代码更改如下：

<template>
  <div id="user">
    <br>
   {{message}}
  </div>
</template>

<script>
	// 创建对象
	// 钩子data-作为对象的属性
	export default {
		data: function() {
			return {
				message: '',
			};
		},
		onLoad: function() {
			this.getHomeInfo () 
			console.log(this.message)
			
		},
		methods: {
			// uni.request写在methods中，便于复用，可以在其他属性中被调用
			getHomeInfo () {  
				uni.request({
					url: 'http://127.0.0.1:8000/test/', //仅为示例，并非真实接口地址。
					
					//   header: {
						// 'content-type': 'application/json'		
					//   },
					success: (res) => {
						this.message = res.data.message
						console.log(this.message)				
					}
				});
			}
		},
		mounted: function() {
			
		},
		
		created: function() {
			
		},
		computed: {
			
		}		
	}

</script>

<stype scoped>

</stype>

效果

知识点

参考:O O