Vue前端+Django后端数据交互

Hrational

已于 2022-10-21 11:00:54 修改

阅读量1.6k

点赞数 1

文章标签： django vue.js python

于 2022-09-29 14:44:17 首次发布

本文链接：https://blog.csdn.net/sdkl_yi/article/details/127106392

版权

本文介绍了如何在前端使用axios发送HTTP请求，包括封装post请求函数，并展示了在Django后端如何配置跨域，包括安装django-cors-headers中间件，设置允许的域名、方法和头部。同时，文中还提及了后端视图函数使用@csrf_exempt装饰器以允许跨域请求。

摘要由CSDN通过智能技术生成

前端使用axios发送请求

先导入axios

import axios from 'axios'

再使用axios封装为函数向后端发送请求，这里以post为例

export function postServer(url, params) {
  // 使用Promise对象进行异步操作，封装axios来实现调用接口，
     成功时使用resolve将response作为参数返回调用处
  return new Promise((resolve, reject) => {
  	// axios.post请求
    axios.post(url, params)
      .then(function(response) {
        resolve(response)
      }).catch(function(error) {
        reject(error.data)
      })
  })
}

网页调用被封装好的请求函数，同时接收后台返回数据控制台输出

postServer(api_name, data).then(response => {
  console.log(response.data)
})

后端跨域设置

pip install django-cors-headers

在Django项目settings.py 加入app

INSTALLED_APPS = (
	...
    'corsheaders',		# 跨域
    ...
)

中间件中添加

MIDDLEWARE_CLASSES = (
    ...
    'corsheaders.middleware.CorsMiddleware',# 注意顺序
    'django.middleware.common.CommonMiddleware', 
    ...
)

然后在settings.py文件末尾加入：

# 直接允许所有主机跨域
CORS_ORIGIN_ALLOW_ALL = True  # 默认为False
CORS_ALLOW_CREDENTIALS = True
CORS_ALLOW_METHODS = (
    'DELETE',
    'GET',
    'OPTIONS',
    'PATCH',
    'POST',
    'PUT',
    'VIEW',
)

CORS_ALLOW_HEADERS = (
    'XMLHttpRequest',
    'X_FILENAME',
    'accept-encoding',
    'authorization',
    'content-type',
    'dnt',
    'origin',
    'user-agent',
    'x-csrftoken',
    'x-requested-with',
    'Pragma',
)

最后在view中对应的后端函数加入修饰器@csrf_exempt

from django.views.decorators.csrf import csrf_exempt
@csrf_exempt
def function(request):
	return_data = {
        'data': 'test'
    }
	return JsonResponse(return_data)