ajax json 403,解决 Ajax 发送 post 请求出现 403 Forbidden 的三种方式

众所周知前端向后台发送 post 请求时,必须验证 csrf,否则会报错 403 Forbidden。使用 Django Form 表单可以直接在表单里面添加 {% csrf_token %} 即可,要是通过 Ajax 发送请求又该怎么办?下面提供三种解决办法:

  • 1
  • 2
  • 3

Ajax 发送

1. 方式一

$('#btn').click(function () {

var li_content = [];

$('#ddd').children('li').each(function () {

li_content.push($(this).html());

});

console.log(li_content);

$.ajax({

url: '/webs/test_json/',

type: 'post',

data: {

'li_list': JSON.stringify(li_content),

csrfmiddlewaretoken: '{{ csrf_token }}'// 添加这句

},

success: function (arg) {

console.log(arg);

}

})

})

2. 方式二

方式二仅在 Django 中适用,因为 {% csrf_token %} 是 Django 的模板语言,它会生成一个隐藏的 input 标签

{% csrf_token %}

123

Ajax 发送

$('#btn').click(function () {

var li_content = [];

$('#ddd').children('li').each(function () {

li_content.push($(this).html());

});

console.log(li_content);

$.ajax({

url: '/webs/test_json/',

type: 'post',

data: {

'li_list': JSON.stringify(li_content),

csrfmiddlewaretoken:$('[name="csrfmiddlewaretoken"]').val()// 添加这句,去获取 input 的值

},

success: function (arg) {

console.log(arg);

}

})

})

3. 方式三

因为 cookie 中同样存在 csrftoken ,所以可以在 js 中获取:$.cooke("cstftoken"),并将其添加到请求头中发送。

1、直接添加请求头:

$.ajax({

url: '/webs/test_json/',

headers: { "X-CSRFtoken":$.cookie("csrftoken")},

type: 'post',

data: {

'li_list': JSON.stringify(li_content)

},

success: function (arg) {

console.log(arg);

}

})

})

2、如果页面有多个 Ajax,那么可以设置全局的:

发送请求前会事先执行 $.ajaxSetup() 方法,它会从 cookie 中获取 csrftoken

$.ajaxSetup({

beforeSend: function (xhr, settings) {

if (!csrfSafeMethod(settings.type) && !this.crossDomain) {

xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));

}

}

});

$.ajax({

url: '/webs/test_json/',

type: 'post',

data: {

'li_list': JSON.stringify(li_content)

},

success: function (arg) {

console.log(arg);

}

})

3、如果想要实现在当 get 方式的时候不需要提交 csrftoken,当 post 的时候需要,实现这种效果的代码如下:

$('#btn').click(function () {

var li_content = [];

$('#ddd').children('li').each(function () {

li_content.push($(this).html());

});

console.log(li_content);

function csrfSafeMethod(method) {

// these HTTP methods do not require CSRF protection

return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));

}

/*

全局Ajax中添加请求头X-CSRFToken,用于跨过CSRF验证

*/

$.ajaxSetup({

beforeSend: function (xhr, settings) {

if (!csrfSafeMethod(settings.type) && !this.crossDomain) {

xhr.setRequestHeader("X-CSRFToken", $.cookie('csrftoken'));

}

}

});

$.ajax({

url: '/webs/test_json/',

type: 'post',

data: {

'li_list': JSON.stringify(li_content)

},

success: function (arg) {

console.log(arg);

}

})

})

**Tips:**一定要导入 jquery.cookie.js 和 jquery-3.3.1.js 文件 !!!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/438426.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

asp.net mvc webform和razor的page基类区别

接触过asp.net mvc的都知道&#xff0c;在传统的webform的模式下&#xff0c;page页面的基类是这样声明的&#xff1a; <% Page Language"C#" MasterPageFile"~/Views/Shared/Site.Master" Inherits"ViewPage" %> 如果是partial view的话…

frameset ajax,js控制frameSet示例

js控制frameSet示例1&#xff1a;js修改frameset的cols属性来达到修改各个页面所占的宽高&#xff0c;例如隐藏当前frame页。复制代码 代码如下:window.parent.document.getElementsByTagName("frameset")[0].cols"0,*";2&#xff1a;js调用其他frame页面的…

人生的抉择—aspx、ashx、asmx文件处理请求效率比较

总结&#xff1a; ashx&#xff1a;只是实现IHttpHandler接口 aspx&#xff1a;public class Page : TemplateControl, IHttpHandler 而TemplateControl是&#xff1a; abstract class TemplateControl : Control, INamingContainer, IFilterResolutionService 所以aspx是重型…

ajax jsp模糊查询源码,Ajax动态执行模糊查询功能

Ajax动态执行模糊查询功能 内容精选换一换Profiling采集的数据较多&#xff0c;同时解析后展示的性能指标项也比较多&#xff0c;为方便用户快捷查找到具体性能指标的含义&#xff0c;提供命令行查询功能&#xff1a;不包含metric_name参数时&#xff0c;打印hiprof.sh脚本帮助…

一般处理程序(ashx)和页面处理程序(aspx)的区别

客官请看图 图中的Httphandler就是处理程序。 两者的共同点 如果把aspx处理程序和ashx处理程序放到上图中&#xff0c;他们是处在相同的位置的&#xff0c; 他们都实现了IHttphandler接口。实现了IHttphandler才具备处理请求的能力 两者的不同点 微软对aspx下足了功夫&#…

怎么在微云服务器找一个文件,微云文件在哪里打开_怎么快速找到微云文件

微云文件在哪里打开&#xff0c;这个问题困扰了许多的朋友&#xff0c;今天小编带着教程走向大家&#xff0c;我们可以使用微云可以快速连接和预览在线文档&#xff1b;同时加载和卸载多终端、手机、计算机、同步PAD数据传输&#xff0c;无需数据线。对于微云客户端&#xff0c…

ASP.NET Core真实管道详解[1]

ASP.NET Core管道虽然在结构组成上显得非常简单&#xff0c;但是在具体实现上却涉及到太多的对象&#xff0c;所以我们在 《ASP.NET Core管道深度剖析[共4篇]》 中围绕着一个经过极度简化的模拟管道讲述了真实管道构建的方式以及处理HTTP请求的流程。在这个系列 中&#xff0c;…

Wayland 显示服务器,wayland 1.8.0 发布,显示服务器

Wayland 1.8.0 发布&#xff0c;该版本现已提供下载&#xff1a; wayland-1.8.0.tar.xz&#xff1a;该版本与 RC2 相比的变化&#xff1a;publish-doc: Add script for publishing docs to the websiteconfigure.ac: bump to version 1.8.0 for the official releasescanner: d…

华为把服务器虚拟底层锁了,华为全面关闭解码锁服务:马上升级到很吓人的技术!...

原标题&#xff1a;华为全面关闭解码锁服务&#xff1a;马上升级到很吓人的技术&#xff01;华为余承东被网友称之为余大嘴&#xff0c;华为P20 Pro发布之后&#xff0c;余大嘴豪言华为P20的销量将超过2000万部&#xff0c;很就会推出一项“很吓人的技术”&#xff0c;没想到仅…

ASP.NET Core真实管道详解[2]:Server是如何完成针对请求的监听、接收与响应的【上】

Server是ASP .NET Core管道的第一个节点&#xff0c;负责完整请求的监听和接收&#xff0c;最终对请求的响应同样也由它完成。Server是我们对所有实现了IServer接口的所有类型以及对应对象的统称&#xff0c;如下面的代码片段所示&#xff0c;这个接口具有一个只读属性Features…

pos机未能连接服务器,pos 机链接不了服务器

pos 机链接不了服务器 内容精选换一换在本章节中&#xff0c;您将运行已部署好的游戏&#xff0c;登录游戏客户端。已准备好Windows机器&#xff0c;硬盘至少20G&#xff0c;且必须安装有显卡。服务器地址&#xff1a;节点的弹性IP地址&#xff0c;请登录CCE控制台&#xff0c;…

ASP.NET Core管道深度剖析(1):采用管道处理HTTP请求

之所以称ASP.NET Core是一个Web开发平台&#xff0c;源于它具有一个极具扩展性的请求处理管道&#xff0c;我们可以通过这个管道的定制来满足各种场景下的HTTP处理需求。ASP. NET Core应用的很多特性&#xff0c;比如路由、认证、会话、缓存等&#xff0c;也同时定制消息处理管…

emui消息推送服务器,别再抱怨,这次或许真的轮到你了,EMUI9.1推送进度再次更新...

最近几年里&#xff0c;华为在系统方面下的功夫可谓是大家有目共睹的。以往大家在使用华为EMUI操作系统的时候&#xff0c;或许会感觉到卡顿、应用启动时间过长、运行不流畅以及UI界面毫无亮点可言等&#xff0c;但那已经是过去的EMUI系统了&#xff0c;今日的EMUI系统已与往日…

ASP.NET Core管道深度剖析(2):创建一个“迷你版”的管道来模拟真实管道请求处理流程

从《ASP.NET Core管道深度剖析&#xff08;1&#xff09;&#xff1a;采用管道处理HTTP请求》我们知道ASP.NET Core请求处理管道由一个服务器和一组有序的中间件组成&#xff0c;所以从总体设计来讲是非常简单的&#xff0c;但是就具体的实现来说&#xff0c;由于其中涉及很多对…

ASP.NET Core管道深度剖析(3):管道是如何处理HTTP请求的?

我们知道ASP.NET Core请求处理管道由一个服务器和一组有序的中间件组成&#xff0c;所以从总体设计来讲是非常简单的&#xff0c;但是就具体的实现来说&#xff0c;由于其中涉及很多对象的交互&#xff0c;我想很少人能够地把它弄清楚。为了让读者朋友们能够更加容易地理解管道…

ASP.NET Core管道深度剖析(4):管道是如何建立起来的?

在《管道是如何处理HTTP请求的&#xff1f;》中&#xff0c;我们对ASP.NET Core的请求处理管道的构成以及它对请求的处理流程进行了详细介绍&#xff0c;接下来我们需要了解的是这样一个管道是如何被构建起来的。这样一个管道由一个服务器和一个HttpApplication构成&#xff0c…

ASP.NET MVC 入门系列教程

一个居于ASP.NET MVC Beta的系列入门文章&#xff0c;有朋友提议说写一个示例程序来同步讲解&#xff0c;那样更加容易学习。所以就写选择了写一个Blog程序来作为示例程序。(原来是居于ASP.NET MVC Preview5 的&#xff0c;现在基本修改为ASP.NET MVC Beta的了) 本系列文章可能…

ASP.NET MVC 入门1、简介

什么是MVC模式 MVC&#xff08;Model-View-Controller&#xff0c;模型—视图—控制器模式&#xff09;用于表示一种软件架构模式。它把软件系统分为三个基本部分&#xff1a;模型&#xff08;Model&#xff09;&#xff0c;视图&#xff08;View&#xff09;和控制器&#xf…

ASP.NET MVC 入门2、项目的目录结构与核心的DLL

我们新建一个ASP.NET MVC的Web Application后&#xff0c;默认的情况下&#xff0c;项目的目录结构如下&#xff1a; App_Data &#xff1a;这个目录跟我们一般的ASP.NET website是一样的&#xff0c;用于存放数据。Content &#xff1a;这个目录是建议用来存放一下资源文件的。…

Maven超详细配置

&#x1f468;‍&#x1f393; 博主介绍&#xff1a;大家好&#xff0c;我是超梦梦梦梦&#xff0c;很高兴认识大家~&#x1f357;关注➕点赞➕评论➕收藏 &#x1f604;&#x1f64f;博主水平有限&#xff0c;如有错误&#xff0c;欢迎各位大佬纠正&#xff01; 目录&#x1f…