请求头设置用 setRequestHeader() 方法
在 open 步骤以后就可以使用这个方法去设置请求头
xhr.open("POST", "http://127.0.0.1:8000/server");
// 设置请求头 Content-Type 值为application/x-www-form-urlencoded
// Content-Type 是设置请求体内容的类型的,application/x-www-form-urlencoded 就是参数 a=1&b=2 的类型
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("a=1&b=2");
案例:
const result = document.querySelector("#result");
result.addEventListener("mouseover", () => {
const xhr = new XMLHttpRequest();
xhr.open("POST", "http://127.0.0.1:8000/server");
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("a=1&b=2");
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status >= 200 && xhr.status < 300) {
// 设置 result 的文本
result.innerHTML = xhr.response;
}
}
};
});
不设置这个请求头的话,是下面这样的
也可以自定义请求头
xhr.setRequestHeader("name", "yujiabao");
但是会报错
是因为这个name是我们自定义的请求头,不是预定义的,像Content-Type就是预定义的 ,如果需要实现自定义的响应头,那么需要加一个特殊的响应头
// 为了实现自定义请求头,表示所有所有类型的头信息都可以接收
response.setHeader("Access-Control-Allow-Headers", "*");
// 1.引入 express
const express = require('express')
// 2.创建应用对象
const app = express()
// 3.创建路由规则
// request 请求报文的封装
// response 响应报文的封装
app.get('/server', (request, response) => {
// 设置响应头 Access-Control-Allow-Origin,值为 *,目的是为了允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置响应体
response.send('HELLO AJAX')
})
// 添加 post 规则
app.post('/server', (request, response) => {
// 设置响应头 Access-Control-Allow-Origin,值为 *,目的是为了允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 为了实现自定义请求头,表示所有所有类型的头信息都可以接收
response.setHeader('Access-Control-Allow-Headers', '*')
// 设置响应体
response.send('HELLO AJAX POST')
})
// 4.监听端口启动服务
app.listen(8000, () => {
console.log('服务已经启动,端口号是8000....');
})
这样还不能实现,是因为我们发送的时候还会给服务器发送一个 option 类型的请求,也就是预检请求,校验这个头信息可用不可用
这个OPTON请求因为在服务器中得不到对应的结果,所以就会报错,此时我们把服务器文件中的post路由规则改为all就行了
// 1.引入 express
const express = require('express')
// 2.创建应用对象
const app = express()
// 3.创建路由规则
// request 请求报文的封装
// response 响应报文的封装
app.get('/server', (request, response) => {
// 设置响应头 Access-Control-Allow-Origin,值为 *,目的是为了允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 设置响应体
response.send('HELLO AJAX')
})
// 任意类型的路由规则,就是无论是get,post,delete还是option等等都可以接收
app.all('/server', (request, response) => {
// 设置响应头 Access-Control-Allow-Origin,值为 *,目的是为了允许跨域
response.setHeader('Access-Control-Allow-Origin', '*')
// 为了实现自定义请求头,表示所有所有类型的头信息都可以接收
response.setHeader('Access-Control-Allow-Headers', '*')
// 设置响应体
response.send('HELLO AJAX POST')
})
// 4.监听端口启动服务
app.listen(8000, () => {
console.log('服务已经启动,端口号是8000....');
})