Django 后端没有接收到前端anxios的 post 内容

最新推荐文章于 2023-03-13 12:33:31 发布

原创最新推荐文章于 2023-03-13 12:33:31 发布 · 1.1k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#前端 #vue.js #javascript

文章讲述了在Vue项目中遇到的前端POST请求后端未接收到数据的问题，问题根源在于Content-Type设置不正确。后端期望从URL中获取参数，而前端设置的是发送JSON数据。文章提供了四种解决方案，包括修改Content-Type为application/x-www-form-urlencoded，使用URLSearchParams或qs库来格式化数据，以及调整后端从请求体中获取参数。同时，文章还介绍了HTTP请求的相关知识，如WSGIRequest对象的属性和HTTP头部信息。

前端使用 vue 无论怎样 post 后端都说没有接收到值，（后端接口正确）

寻找原因：

1、前端查看自己的请求类型

Content-Type:application/json

我们的请求是这样的：

axios({
   method:'post',
   url:'/video/upload',
   data:{"username": "admin", "pwd": "admin"}
})

正确的应该是：因为后端是从url 中获取参数（可要求后端更改从请求体中获取）

Content-Type:application/x-www-form-urlencoded

2、axios会帮我们 转换请求数据和响应数据 以及 自动转换 JSON 数据

3、解决方法1

let param = new URLSearchParams()
param.append('username', 'admin')
param.append('pwd', 'admin')
axios({
	method: 'post',
	url: '/api/lockServer/search',
	data: param
})

解决方法2

import Qs from 'qs'
let data = {
	"username": "admin",
	"pwd": "admin"
}

axios({
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	},
	method: 'post',
	url: '/api/lockServer/search',
	data: Qs.stringify(data)
})

解决方法3

通过修改 transformRequest

import Qs from 'qs'
axios({
	url: '/api/lockServer/search',
	method: 'post',
	transformRequest: [function (data) {
	    // 对 data 进行任意转换处理
	    return Qs.stringify(data)
    }],
	headers: {
		'deviceCode': 'A95ZEF1-47B5-AC90BF3'
	},
	data: {
	    username: 'admin',
		pwd: 'admin'
	}
})

解决方法4后端改为从请求体中获取参数

def get_body_json(request):
    # 得到的是一个二进制数据
    json_str = request.body
    print(json_str)                     # b'{\n    "f":200,\n    "d":300\n    \n}'\
    # 对二进制数据进行解码,解码得到json数据
    json_str = json_str.decode()
    print(json_str)                     # {"f":200,"d":300}
    # 将json数据转化成字典形式
    json_data = json.loads(json_str)
    print(json_data)                    # {'f': 200, 'd': 300}

补充知识：

我们浏览器请求服务器会传输的一些信息了。这些信息在django中都会被django的WSGIRequest对象存储。

WSGIRequest 有哪些属性

WSGIRequest对象上大部分的属性都是只读的。因为这些属性是从客户端上传上来的，没必要做任何的修改。
以下将对一些常用的属性进行讲解：
path：请求服务器的完整“路径”，但不包含域名和参数。比如http://www.jd.com/aaa/bbb/，那么path就是/aa/bbb/；
get_full_path()：返回完整的path。如果有查询字符串，还会加上查询字符串。比如/aaa/?username=huang
get_raw_uri()：获取请求的完整url，如http://www.jd.com//aaa/?username=huang
method：当前请求的http方法。比如是GET，POST，HEAD，PUT等；
GET：一个django.http.request.QueryDict对象。操作起来类似于字典。这个属性中包含了所有以?xxx=xxx的方式上传上来的参数；
POST：也是一个django.http.request.QueryDict对象。这个属性中包含了所有以POST方式上传上来的参数；
FILES：也是一个django.http.request.QueryDict对象。这个属性中包含了所有上传的文件；
COOKIES：一个标准的Python字典，包含所有的cookie，键值对都是字符串类型；
session：一个类似于字典的对象。用来操作服务器的session；
is_secure()：是否是采用https协议
is_ajax()：是否采用ajax发送的请求。原理就是判断请求头中是否存在X-Requested-With:XMLHttpRequest；
get_host()：服务器的域名。如果在访问的时候还有端口号，那么会加上端口号。比如www.baidu.com:9000；
META：存储的客户端发送上来的所有header信息；
        CONTENT_LENGTH：请求的正文的长度（是一个字符串）；
        CONTENT_TYPE：请求的正文的MIME类型；
        HTTP_ACCEPT：响应可接收的Content-Type；
        HTTP_ACCEPT_ENCODING：响应可接收的编码；
        HTTP_ACCEPT_LANGUAGE： 响应可接收的语言；
        HTTP_HOST：客户端发送的HOST值；
        HTTP_REFERER：在访问这个页面上一个页面的url；
        QUERY_STRING：单个字符串形式的查询字符串（未解析过的形式）；
        REMOTE_ADDR：客户端的IP地址。如果服务器使用了nginx做反向代理或者负载均衡，那么这个值返回的
                               是127.0.0.1(nginx服务器本身)，这时候可以使用HTTP_X_FORWARDED_FOR来获取，
        SERVER_NAME：服务器域名;
        SERVER_PORT：服务器端口号，是一个字符串类型;