JQuery ajax设置Request Headers实例

最新推荐文章于 2024-08-15 17:43:43 发布

原创最新推荐文章于 2024-08-15 17:43:43 发布 · 2.4w 阅读

9 ·

CC 4.0 BY-SA版权

文章标签：

#ajax #http #jQuery

网络&网站相关专栏收录该内容

3 篇文章

订阅专栏

本文介绍了在jQuery AJAX中如何设置请求头携带Token，包括Token认证机制的实现，防止表单重复提交和anti CSRF攻击的作用，以及通过放置在请求头中和使用beforeSend方法设置请求头的两种方式。

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

最近在为某神秘OJ测试接口，其中一项是需要用到请求头token,即在用户登陆后，后台给它分配一个token,返回给前端，之后该用户每次请求都需要在http头部加上请求头！
先讲一下这个东西是啥先吧！

Token认证机制实现

JSON Web Token（JWT）是一个非常轻巧的规范。这个规范允许我们使用JWT在用户和服务器之间传递安全可靠的信息。
具体这里推荐一篇博客，就不搬过来了！基于Token的WEB后台认证机制

传递token的作用

防止表单重复提交

主要原理是：用户提交表单后，会携带token到服务器，服务器将session中的token和用户请求带过来的token进行比较，如果相同，会将session中的token进行更新。若用户重复提交，则用户之后发过来的请求的token和服务器session中的token是不一致的，所以会导致之后的表单提交操作失败。

防止anti csrf 攻击（跨站点请求伪造）

如果用户是跨站点伪造的请求，在验证token的时候会发现客户端请求的token和服务器session中的token是不一致的，所以会导致请求的失败。

ajax中传递token的两种方法

放在请求头中

 $.ajax({
                type: "post",
                url: "http:///test/getInfo",
                headers: {      //请求头
                    Accept: "application/json; charset=utf-8",
                    token: "" + token  //这是获取的token
                },
                data:JSON.stringify(jsonDate),
                contentType: "application/json",  //推荐写这个
                dataType: "json",
                success: function(data){
                	console.log('ok');
                },
                error:function(){
                    console.log('error');
                }
            })

使用beforeSend方法设置请求头

 $.ajax({
                type: "post",
                url: "http://aliyun.seatang.cn:8080/onlinejudge/test/getInfoById",
                beforeSend: function(request) {      //使用beforeSend
                    request.setRequestHeader("token", token);
                     request.setRequestHeader("Content-Type","application/json");
                 },
                data:JSON.stringify(jsonDate),
                dataType: "json",
                success: function(data){
                    console.log('ok');
                },
                error:function(){
                    console.log('error');
                }
            })

上面为什么要推荐contentType 设置为"application/json"呢，是因为如果我们传送的数据是一个复杂的json对象时，默认的application/x-www-form-urlencoded 这种形式是没有办法将复杂的 JSON 组织成键值对形式，然后请求就会报错

这里推荐一篇博文，感觉不错
$.ajax 中的contentType