七、设置请求头信息

张钧泽林

已于 2025-04-27 16:46:55 修改

阅读量6.7k

点赞数 11

分类专栏： AJAX学习文章标签：前端 javascript 开发语言

于 2023-07-09 15:51:31 首次发布

本文链接：https://blog.youkuaiyun.com/qq_43733614/article/details/131623157

版权

AJAX学习专栏收录该内容

9 篇文章

订阅专栏

文章详细阐述了如何在xhr中设置预定义和自定义请求头，特别是Content-Type用于定义请求体内容类型。同时，解释了在设置自定义请求头时遇到的浏览器安全机制问题，以及解决这个问题的方法，即在服务端设置响应头Access-Control-Allow-Headers和Access-Control-Allow-Origin来允许跨域请求。

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

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上，打开开发者工具，如下，即完成自定义请求头的创建

所有代码：

前端代码

<!--Post请求  前端浏览器页面-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Post 请求</title>
    <style>
        #result{
            width: 200px;
            height: 100px;
            border: solid 1px #903;
        }
    </style>
</head>
<body>
    <!--鼠标悬浮于div上，向服务端发送请求，并将响应体显示到div中-->
    <div id = "result"></div>
    <script>
        //获取元素对象
        const result = document.getElementById('result');
        //绑定鼠标悬浮事件
        result.addEventListener('mouseover',function(){
            //1、创建对象
            const xhr = new XMLHttpRequest();
            //2、初始化 设置请求类型和url
            xhr.open("Post","http://127.0.0.1:8000/server");
            //设置请求头
            //Content-Type用来设置请求体内容类型
            //后面长串用来设置请求体内容类型的固定写法
            xhr.setRequestHeader('Content-Type','application/x-www-form-urlencoded');
            //自定义请求头设置
            xhr.setRequestHeader('name','study');

            //3.发送   设置请求体
            xhr.send("a=100&b=200&c=300");
            //4.事件绑定
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    if(xhr.status >= 200 && xhr.status < 300){
                        result.innerHTML=xhr.response;
                    }
                }
            }
        });
    </script>
</body>
</html>

服务端代码

//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端口监听中......");
});

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