七、设置请求头信息

1、预定义请求头设置：

在xhr.open()方法之后添加语句，进行请求头设置

            //设置请求头
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            

请求报文分为：行、头、空行、体

其中Content-Type用以设置请求体内容类型；

后面的长串字符串是用来设置请求体内容类型的固定写法

在开发者工具中查看：

2、自定义请求头设置：

设置自定义的请求头

xhr.setRequestHeader('name','value');

F5运行，并打开开发者工具窗口；此时会报红，并且原有div没有展示服务端的响应体内容；这是因为自定义的请求头会触发浏览器的安全机制

 若是需要正常发送和接受，需要在服务端定义特殊的响应头

 设置响应头，能够接受所有类型的头信息

response.setHeader("Access-Control-Allow-Headers","*");

由于在真正的运行阶段，前端页面发送请求头信息之后，还需要验证自定义的请求头是否可用，会用到Options请求方法，因此需要将请求方法设置为all

app.all('/server',(request,response) =>{
    //设置响应头   设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    //设置响应头    * 表示允许接受所有类型的头信息
    response.setHeader("Access-Control-Allow-Headers","*");
    //设置响应体
    response.send("Hello Ajax-Post请求");
})

关闭server.js的运行，并重新启动，打开前端页面文件并F5运行，鼠标悬浮div上，打开开发者工具，如下，即完成自定义请求头的创建

所有代码：

前端代码

服务端代码

//1.引入express
const express = require('express')

//2.创建引用对象
const app = express();

//3.创建路由规则
//request  是对请求报文封装
//response 是对响应报文的封装
//此处的'/server'代表若是连接server，则会进行对应的设置
app.get('/server',(request,response) =>
{
    //设置响应头  设置允许跨域
    response.setHeader('Access-Control-Allow-Origin','*');
    //设置响应体
    response.send("Hello Ajax");
});
app.all('/server',(request,response) =>{
    //设置响应头   设置允许跨域
    response.setHeader("Access-Control-Allow-Origin","*");
    //设置响应头    * 表示允许接受所有类型的头信息
    response.setHeader("Access-Control-Allow-Headers","*");
    //设置响应体
    response.send("Hello Ajax-Post请求");
})

//4.监听端口启动服务
app.listen(8000,()=>{
    console.log("服务器已经启动，8000端口监听中......");
});

个人学习记录，欢迎指点讨论