charles查看电脑发起的所有请求和http请求报文+js实现请求设置

DcTbnk
476 阅读1分钟

携手创作，共同成长！这是我参与「掘金日新计划 · 8 月更文挑战」的第13天，点击查看活动详情

一、charles查看电脑发起的所有请求和http请求报文-1

在这里插入图片描述

记住 要把localhost替换成本地IP地址
即http://IP地址:端口号/对应的网址或页面 否则charles查看不到电脑发起的请求
查看本地IP地址的方法：在cmd中输入命令行ipconfig或者all然后回车
在这里插入图片描述

http请求报文

常见的请求方式

​ get

​ post

​ put

​ delete

请求报文

请求行

​ 请求方式 请求地址 版本号

请求头

​ cookie,host,origin,Content-Type

请求体

​ 存储的是发送给服务器的数据

请求头和请求体之间有一个空行，空行的作用是分割请求头和请求体

常见的content-type

application/x-www-form-urlencoded 	url编码
application/json					json格式的
multipart/form-data					form-data格式的，通常用来上传文件的时候使用

image.png

GET / HTTP/1.1
Host: 192.168.17.108:3000
Upgrade-Insecure-Requests: 1
User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Safari/537.36
Accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/webp,image/apng,*/*;q=0.8,application/signed-exchange;v=b3;q=0.9
Accept-Encoding: gzip, deflate
Accept-Language: zh-CN,zh;q=0.9,en;q=0.8
If-None-Match: W/"1f9-iTRx5uJnKb+8uubLIk9+7lRMigs"
Connection: keep-alive

image.png

二、js实现请求设置-2

在public文件里新建一个命名为form.html的文件

然后在终端里运行该文件 因为安装过nodemon 在packeage.json里设置过，所以执行npm start 或npm run start 即可
再在网页中输入主机名端口号地址等信息地址
例如 http://192.168.17.30:3000/form.html
http://localhost:3000/form.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <button onclick="jsPost()">jsPost</button>
    <button onclick="axiosPost()">axiosPost</button>
    <button onclick="axiosPostAmend()">axiosPostAmendJsPost</button>
    <!-- 可以去 bootcdn.cn 这个网站上搜网络jQuery和axios-->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/axios/0.19.2/axios.min.js"></script>
    <script>
        /*
        Content-Type: 
        application / x-www- form - urlencoded url编码
        application / json json格式的
        multipart / form - data form - data格式的， 通常用来上传文件的时候使用 */
        /* 
            jquery  -----  默认url编码
            axios   -----  默认json格式
            他们之间可以转换，改变Content-Type的值
        */


        /* jqPost */
        function jsPost() {
            $.ajax({
                type: "post",
                url: "/api/v1/m",
                data: {
                    name: '刘死狗',
                    age: 18,
                    skills: '治疗',
                },
                success: function (response) {
                    console.log(response);
                }
            });
        }


        /* axiosPost */
        function axiosPost() {
            axios.post('/api/v1/m', {
                name: '墨薇荷',
                age: 18,
                skills: '唱歌,打游戏,吃喝玩乐,睡大觉',
            }).then(res => {
                console.log(res);
            });
        }

        /* axiosPost   将其默认的json格式改为url编码 */
        function axiosPost() {
            axios.post('/api/v1/m', "name=张三&age=19", {
                headers: {
                    "Content-Type": "application/x-www-form-urlencoded",
                }
            }).then(res => {
                console.log(res);
            });
        }
    </script>
</body>

</html>
avatar
文章
阅读
粉丝