七、设置请求头信息

默九思

已于 2023-07-09 20:52:23 修改

阅读量5.9k

点赞数 11

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

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

本文链接：https://blog.csdn.net/qq_43733614/article/details/131623157

版权

AJAX学习专栏收录该内容

9 篇文章 0 订阅

订阅专栏

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

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

默九思

关注

11
点赞
踩
11

收藏

觉得还不错? 一键收藏
打赏
0
评论
七、设置请求头信息

设置自定义的请求头F5运行，并打开开发者工具窗口；此时会报红，并且原有div没有展示服务端的响应体内容；这是因为自定义的请求头会触发浏览器的安全机制若是需要正常发送和接受，需要在服务端定义特殊的响应头设置响应头，能够接受所有类型的头信息由于在真正的运行阶段，前端页面发送请求头信息之后，还需要验证自定义的请求头是否可用，会用到Options请求方法，因此需要将请求方法设置为all//设置响应头设置允许跨域//设置响应头 * 表示允许接受所有类型的头信息//设置响应体。
复制链接

扫一扫