axios 前端与 Django 后端的 POST 交互

news2024/10/12 0:32:52

背景

自己在写一些油猴脚本，前端需要用 JS，后端是自己的服务，是用 Python 的 Django 框架完成的。

油猴脚本中需要通过 POST 方法，向后端传一些数据，所以前端我用的是 axios 库，后端需要用 Django 处理 POST 数据。

关于跨域名的问题，可以参考我的另一篇文章 Django 跨站请求伪造（csrf）防御——解决 POST 请求 403 问题

关于 POST 请求

POST 请求有多种类型，在 header 中的 Content-Type 中进行了定义。

Content-Type	描述
`application/json`	用于发送 JSON 格式的数据，axios 默认使用该格式
`application/x-www-form-urlencoded`	用于提交表单数据，不支持传输文件，Django 文档中主要描述的是这种类型
`multipart/form-data`	用于发送文件或同时发送文本数据和二进制数据
`text/plain`	用于发送纯文本内容，不常用
`application/xml`	用于发送或接收 XML 格式的数据，不常用

常用 POST 请求对应的发起与接收代码示例

`application/json` 类型

axios 发起，也是 axios 默认发起的 POST 请求时的类型：

data = { 
  key: 'value'
}
headers = {
  'Content-Type': 'application/json'
}

axios.post(
  'url', data,
  {
    headers: headers
})
.then(function (response) {
  // 处理成功响应
  console.log(response.data);
})
.catch(function (error) {
  // 处理错误
  console.error(error);
});

Django 处理：

from django.http import JsonResponse
import json

def my_json_post_view(request):
    if request.method == 'POST':
        data = json.loads(request.body)  # 解析JSON数据
        if 'key' in data.keys():
    	    # 处理数据...
	        return JsonResponse({'message': f' key 的内容是 {data["key"]}'})

`application/x-www-form-urlencoded` 类型

axios 发起：

data = { 
  key: 'value'
}
headers = {
  'Content-Type': 'application/x-www-form-urlencoded'
}

axios.post(
  'url', data, 
   {
       headers: headers
})
.then(function (response) {
  // 处理成功响应
  console.log(response.data);
})
.catch(function (error) {
  // 处理错误
  console.error(error);
});

Django 处理：

def my_form_post_view(request):
    if request.method == 'POST':
        # 访问表单数据
        value = request.POST['key']
        # 处理数据...
        return HttpResponse('处理成功')  # 或者返回其他类型的响应

`multipart/form-data` 类型

嫌麻烦的，可以不用这个类型，因为我们可以偷懒一点，把文件进行 base64 编码，之后在 Django 后端的代码里进行 Base64 解码即可

axios 发起：

const formData = new FormData(); // 创建 FormData 实例
formData.append('file', fileInput.files[0]); // 添加文件字段和值（fileInput 是你的文件输入元素）
formData.append('textField', 'some text'); // 添加其他字段和值（如果需要的话）

headers = {
  'Content-Type': 'multipart/form-data'
}

axios.post(
  'url', formData, 
   {
       headers: headers
})
.then(function (response) {
  // 处理成功响应
  console.log(response.data);
})
.catch(function (error) {
  // 处理错误
  console.error(error);
});

Django 处理：

from django.core.files.uploadhandler.upload_handlers import upload_to_save_object
import os

def my_file_upload_view(request):
    if request.method == 'POST':
        uploaded_file = request.FILES['file']  # 获取上传的文件对象
        text_field = request.POST['textField'] # 获取其他字段
        # 保存文件到服务器等操作...
        return HttpResponse('文件上传成功')  # 返回响应