http请求头详解

最新推荐文章于 2022-11-18 18:05:19 发布

Gytha_1

最新推荐文章于 2022-11-18 18:05:19 发布

阅读量1.1k

点赞数

分类专栏： http 浏览器

本文链接：https://blog.csdn.net/Gytha_1/article/details/78338666

版权

http 同时被 2 个专栏收录

1 篇文章 0 订阅

订阅专栏

浏览器

1 篇文章 0 订阅

订阅专栏

原生js获取cookie值

Headers

General

Request URL: http://10.10.10.2/pioneer/api/user/login

Request Method: POST

Status Code: 200

Remote Address: 10.10.10.2:80

Referrer Policy: no-referrer-when-downgrade（浏览器的默认安全策略，当发生降级时（https到http）不传递referrer报头）

Response Headers

Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type

Access-Control-Allow-Method: GET,POST,PUT,DELETE,OPTIONS

Access-Control-Allow-Origin: *

Connection: keep-alive(开启HTTP持久连接，HTTP 1.1默认值)

Content-Type: application/json;charset=UTF-8

Date:XXX

Server:nginx/1.13.8

Transfer-Encoding: chunked

X-Application-Context: pioneer-gateway:dev:7070

Request Headers

Accept: */*

Accept-Encoding: gzip, deflate

Accept-Language: zh-CN,zh;q=0.9

Authorization:

Bearer eyJhbGciOiJIUzUxMiJ9.eyJpc3MiOiJwaW9uZWVyIiwianRpIjoiT2hnVGRZY0dFZWlRay1FNVpfR1pMZyIsImlhdCI6MTUzMTUzMjE0NCwiZXhwIjoxNTMxNjE4NTQ0LCJtYXJrIjoib0pzRUtkSGlyNHJabGVtayIsImRhdGEiOiJ7XCJhZGRyQ29kZVwiOjAsXCJvcmdJRFwiOjIxNDc0MTgxMTIsXCJyaWdodFwiOjE0MzE5NDI1NSxcInJvbGVcIjpcInJvb3RcIixcInVzZXJcIjpcInJvb3RcIn0ifQ.YADFh8G196L2Gwa4Yk5JuwlANgT-cYJERDay

Connection: keep-alive

Content-Length:

Content-Type:

Host:

Authorization:

Origin: http://localhost:8080

Referer: http://localhost:8080/fence/statistics

User-Agent: Mozilla/5.0 (Windows NT 6.1; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/65.0.3325.146 Safari/537.36

Form Data

userID:

userPwd:

常见问题：

情况一：fetch发送post请求时，总是发送两次，第一次状态码204，第二次才成功

这是因为修改了请求头，比如请求头中加了token，或者修改了Content-Type

原因很简单，因为你用的fetch post修改了请求头,导致fetch第一发送一个options请求，询问服务器是否支持修改的请求头，如过服务器支持，那么将会再次发送真正的请求。

因为你用post发送了修改过的请求头，所以浏览器会自动的发送options去看看是否支持修改的请求头。如果支持就会再次发送post。注意是浏览器自动发送。你看你源码，绝对修改了请求头。

情况二：Cache

缓存https://segmentfault.com/a/1190000013854262

缓存的作用：
1.减少延迟(页面打开的速度)。
2.降低服务器负载(先取缓存，无缓存在请求服务器，有效降低服务器的负担)。

3.保证稳定性(有个笑话是手机抢购时为了保证服务器的稳定性，在前端写个随机数限制百分之二十的人发送数据到后台，这也侧面说明了缓存对于稳定性的作用)。

Expires：http1.0推出，服务器返回文件有效期，受本地时间修改的影响，不好Response Headers, Expires:XXXX

Last-Modified: http1.0推出，服务器端最新修改时间，浏览器发出If-Modified-Since对比，不同则更新，相同则缓存304，问题是，服务器一直更新，这个值会一直改

Cache-Control：http1.1推出，指文件缓存有效期，如Request Headers, Cache-Control:max-age=0

1.max-age:单位是s，设置文件最大缓存时间，用得最多。max-age>0 时直接从游览器缓存中提取。max-age<=0 时向server 发送http 请求确认 ,该资源是否有修改。有的话返回200 ,无的话返回304.
2.public:缓存可以被多用户共享，例如360浏览器可以登录不同账号，电脑系统可以切换不同账号。
3.private:仅单用户私有，不被多用户共享。
4.no-cache:不会被缓存。

5.no-store:不允许被存储。

ETag: http1.1推出，服务器端随机生成版本号，浏览器发出If-None-Match对比，如果版本号不同，则返回200，相同则调用浏览器本地硬盘缓存304，这种方式比Last-Modified靠谱。

情况三：cookies

存储http://www.cnblogs.com/rainman/archive/2011/06/22/2086069.html#m4

HTTP Cookie（也叫Web Cookie或浏览器Cookie）是服务器发送到用户浏览器并保存在本地的一小块数据，它会在浏览器下次向同一服务器再发起请求时被携带并发送到服务器上。通常，它用于告知服务端两个请求是否来自同一浏览器，如保持用户的登录状态。Cookie使基于无状态的HTTP协议记录稳定的状态信息成为了可能。

Cookie主要用于以下三个方面：

会话状态管理（如用户登录状态、购物车、游戏分数或其它需要记录的信息）
个性化设置（如用户自定义设置、主题等）
浏览器行为跟踪（如跟踪分析用户行为等）

Cookie曾一度用于客户端数据的存储，因当时并没有其它合适的存储办法而作为唯一的存储手段，但现在随着现代浏览器开始支持各种各样的存储方式，Cookie渐渐被淘汰。由于服务器指定Cookie后，浏览器的每次请求都会携带Cookie数据，会带来额外的性能开销（尤其是在移动环境下）。新的浏览器API已经允许开发者直接将数据存储到本地，如使用 Web storage API （本地存储和会话存储）或 IndexedDB 。

请留意在安全节提到的安全隐患问题，JavaScript可以通过跨站脚本攻击（XSS）的方式来窃取Cookie。

题目：

JS设置cookie、读取cookie、删除cookie

JS读取cookie: document.cookie

function getCookie(name)
{
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}

getCookie("name")//可获取Cookies中的name的值

读取cookie

function getCookie(name){
    var arr,reg=new RegExp("(^| )"+name+"=([^;]*)(;|$)");
    if(arr=document.cookie.match(reg))
        return unescape(arr[2]);
    else
        return null;
}

删除cookie

解析：

function delCookie(name)
{
    var exp = new Date();
    exp.setTime(exp.getTime() - 1);
    var cval=getCookie(name);
    if(cval!=null)
    document.cookie= name + "="+cval+";expires="+exp.toGMTString();
}
//使用示例
setCookie("name","hayden");
alert(getCookie("name"));
//如果需要设定自定义过期时间
//那么把上面的setCookie　函数换成下面两个函数就ok;
//程序代码
function setCookie(name,value,time){
    var strsec = getsec(time);
    var exp = new Date();
    exp.setTime(exp.getTime() + strsec*1);
    document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
}
function getsec(str){
    alert(str);
    var str1=str.substring(1,str.length)*1;
    var str2=str.substring(0,1);
    if (str2=="s")
    {
        return str1*1000;
    }
    else if (str2=="h")
    {
        return str1*60*60*1000;
    }
    else if (str2=="d")
    {
        return str1*24*60*60*1000;
    }
}
//这是有设定过期时间的使用示例：
//s20是代表20秒
//h是指小时，如12小时则是：h12
//d是天数，30天则：d30
setCookie("name","hayden","s20");

题目：使用JS准确获取URL网址中参数的几种方法

如，https://blog.csdn.net/zhihua_w/article/details/54845945

基本知识，获取url各个部分：

获取(或设置) 整个 URL字符串：window.location.href
var test = window.location.href;
alert(test);
//返回弹出：http://www.zhihuaw.com/wap/tmpl/member/member.html?token=zhihua_wei


获取(或设置) URL属性中跟在问号后面的部分：window.location.search
var test = window.location.search;
alert(test);
//返回弹出：?token=zhihua_wei

获取(或设置)  URL属性中在井号“#”后面的分段：window.location.hash

方法一：

    function getQueryString(name){
        var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
        var r = window.location.search.substr(1).match(reg);
        if (r!=null) return r[2]; return '';
    }

方法二：

split拆分法

    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
        if (url.indexOf("?") != -1) {
            var str = url.substr(1);//indexOf取"?"后的值
            strs = str.split("&");//用&符拆分，[a=1,b=2]
            for (var i = 0; i < strs.length; i++) {//遍历，再用"="拆分
                theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);//unescape用于解码
            }
        }
        return theRequest;
    }
    var Request = new Object();
    Request = GetRequest();
    // var id=Request["id"]; 
    // var 参数1,参数2,参数3,参数N;
    // 参数1 = Request['参数1'];
    // 参数2 = Request['参数2'];
    // 参数3 = Request['参数3'];
    // 参数N = Request['参数N'];

原生js获取cookie值

function getCookie(name){
    var strcookie = document.cookie;//获取cookie字符串
    var arrcookie = strcookie.split("; ");//分割
    //遍历匹配
    for ( var i = 0; i < arrcookie.length; i++) {
        var arr = arrcookie[i].split("=");
        if (arr[0] == name){
            return arr[1];
        }
    }
    return "";
}

方法三：如果只获取单个参数

    function GetRequest() {
        var url = location.search; //获取url中"?"符后的字串
        if (url.indexOf("?") != -1) {  //判断是否有参数
            var str = url.substr(1); //从第一个字符开始 因为第0个是?号 获取所有除问号的所有符串
            strs = str.split("=");  //用等号进行分隔 （因为知道只有一个参数 所以直接用等号进分隔 如果有多个参数 要用&号分隔 再用等号进行分隔）
            alert(strs[1]);     //直接弹出第一个参数 （如果有多个参数 还要进行循环的）
        }
    }

本地存储-webStorage

webstorage

webstorage是本地存储，存储在客户端，包括localStorage和sessionStorage。

localStorage

localStorage生命周期是永久，这意味着除非用户显示在浏览器提供的UI上清除localStorage信息，否则这些信息将永远存在。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。

sessionStorage

sessionStorage仅在当前会话下有效，关闭页面或浏览器后被清除。存放数据大小为一般为5MB,而且它仅在客户端（即浏览器）中保存，不参与和服务器的通信。源生接口可以接受，亦可再次封装来对Object和Array有更好的支持。

localStorage和sessionStorage使用时使用相同的API：

 localStorage.setItem("key","value");//以“key”为名称存储一个值“value”

    localStorage.getItem("key");//获取名称为“key”的值

    localStorage.removeItem("key");//删除名称为“key”的信息。

    localStorage.clear();//清空localStorage中所有信息

简单的举个例子来了解一下他们的用法

仿一下京东官网顶部的广告关闭，效果为第一次进入官网会出现广告，然后点击关闭，刷新网页不会再显示广告，但是当清除localStorage存入的数据，刷新网页会再显示广告。
html代码

<div class="header">
    <div class="header-a">
        <a href=""></a>
        <i class="close">x</i>
    </div>
</div>

css代码

.header{
    width:100%;
    height:80px;
    background:#000;
}
.header-a{
    width:1190px;
    margin:0 auto;
    position:relative;
    background:url("images/1.jpg") no-repeat;
}
.header-a a{
    width:100%;
    height:80px;
    display:block;
}
.close{
    cursor:pointer;
    color:#fff;
    position:absolute;
    top:5px;
    right:5px;
    background:rgb(129, 117, 117);
    width: 20px;
    text-align: center;
    line-height: 20px;
}

js代码

//localStorage方法
<script src="../js/jquery.min.js"></script>
function haxi(){
        //判断localStorage里有没有isClose
        if(localStorage.getItem("isClose")){             
            $(".header").hide();
        }else{
            $(".header").show();
        }
        //点击关闭隐藏图片存取数据
        $(".close").click(function(){
            $(".header").fadeOut(1000);

            localStorage.setItem("isClose", "1"); 
        })
    }
    haxi();

作用域不同

不同浏览器无法共享localStorage或sessionStorage中的信息。相同浏览器的不同页面间可以共享相同的 localStorage（页面属于相同域名和端口），但是不同页面或标签页间无法共享sessionStorage的信息。这里需要注意的是，页面及标签页仅指顶级窗口，如果一个标签页包含多个iframe标签且他们属于同源页面，那么他们之间是可以共享sessionStorage的。

Cookie

生命期为只在设置的cookie过期时间之前一直有效，即使窗口或浏览器关闭。存放数据大小为4K左右。有个数限制（各浏览器不同），一般不能超过20个。与服务器端通信：每次都会携带在HTTP头中，如果使用cookie保存过多数据会带来性能问题。但Cookie需要程序员自己封装，源生的Cookie接口不友好(http://www.jb51.net/article/6...
)。
js代码

//Cookie方法
<script src="../js/cookie.js"></script>//Cookie函数自己封装引入
function haxi(){
        if(getCookie("isClose")){             
            $(".header").hide();
        }else{
            $(".header").show();
        }
        
        $(".close").click(function(){
            $(".header").fadeOut(1000);

            setCookie("isClose", "1","s10");
        })
    }
    haxi();

cookie的优点：具有极高的扩展性和可用性

1.通过良好的编程，控制保存在cookie中的session对象的大小。
2.通过加密和安全传输技术，减少cookie被破解的可能性。
3.只有在cookie中存放不敏感的数据，即使被盗取也不会有很大的损失。
4.控制cookie的生命期，使之不会永远有效。这样的话偷盗者很可能拿到的就   是一个过期的cookie。

cookie的缺点：

1.cookie的长度和数量的限制。每个domain最多只能有20条cookie，每个cookie长度不能超过4KB。否则会被截掉。
2.安全性问题。如果cookie被人拦掉了，那个人就可以获取到所有session信息。加密的话也不起什么作用。
3.有些状态不可能保存在客户端。例如，为了防止重复提交表单，我们需要在服务端保存一个计数器。若吧计数器保存在客户端，则起不到什么作用。

localStorage、sessionStorage、Cookie共同点：都是保存在浏览器端，且同源的。

Gytha_1

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
http请求头详解

原生js获取cookie值HeadersGeneralRequest URL: http://10.10.10.2/pioneer/api/user/loginRequest Method: POSTStatus Code: 200Remote Address: 10.10.10.2:80Referrer Policy: no-referrer-when-downgra...
复制链接

扫一扫