【AJAX学习笔记三】ajax的post请求及其请求主体请求头的设置

本文链接：https://blog.youkuaiyun.com/weixin_46116626/article/details/124357587

本文档详细介绍了AJAX的POST请求实现，包括如何设置请求主体和请求头。在POST请求中，前端只需将GET改为POST，并在后端对应修改。请求主体允许自定义，请求头可在发送请求前设置。注意，自定义请求头可能导致POST请求出错，需服务器端设置为接收所有类型请求。此外，POST请求通常伴随OPTIONS预检请求，因此需处理OPTIONS路由。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

AJAX的post请求及其请求行请求头的设置

一、POST请求

参照上一节的笔记，我们实现了get请求的方法，而POST方法的简单实现和GET方法类似，只需要在前端中将get请求修改为post。

xhr.open('POST', 'http://127.0.0.1:8000/server');

在后端中将其接受类型修改为post即可

app.post('/server', (request, response) => {
	/设置响应内容
});

通过以上步骤即可实现post方法的简单请求。

二、请求主体的设置

当我们学会了GET和POST方法的简单请求之后，我们知道在POST中我们可以自己设置请求行

//发送请求  可以设置请求主体
xhr.send('a=100&b=300');

在这里插入图片描述

三、请求头的设置

我们可以在设置请求之后且发送请求之前设置请求头

///可以设置请求头（预定义）
xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded')
//或者可以自定义请求头（自定义）
xhr.setRequestHeader('name', 'aaa');

当我们在前端设置了请求头之后，我们还要在后端设置相应的响应

//响应头 *表示所有头的类型都可以接受
response.setHeader('Access-Control-Allow-Headers', '*');

之后我们就可以在请求中看到我们预定义和自定义的请求头了。
在这里插入图片描述
重要的事情：：：
对了，当我们自定义了请求头的时候，我们再次进行发送POST请求的时候会报错，所以我们要把服务器端的POST改成all，代表可以接收任意类型的请求。

当我们要发post请求的请求的时候，在post之前要发一个option请求进行测试，但是我们没有设置option类型的路由，所以我们要将app.post改成app.all.