axios异步请求如何设置通过django的csrf验证

最新推荐文章于 2022-11-05 21:04:03 发布
最新推荐文章于 2022-11-05 21:04:03 发布
阅读量8k 收藏 9
点赞数 1
分类专栏： axios
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Clark_Fitz817/article/details/79226661
版权

问题描述：

最近在使用vue全家桶开发前端，后端框架是django，我在使用axios做前端异步请求时，除了get之外的请求方法django都会返回403状态码，表单总是提交不上去。

分析原因：

通过chrome浏览器的network中，


了解到是csrf的认证没有通过，所以被拒绝提交。

我之前对csrf攻击和防范的原理不太了解，在axios的异步请求配置里也没有做特别的处理，所以请求被django拒绝了。

我首先具体查看了csrf攻击和防范的原理，了解了csrf攻击的原理和主要的三种防护手段，详见

最低0.47元/天 解锁文章
踩坑小王子
关注
  • 1
    点赞
  • 踩
  • 9
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
专栏目录
React + Axios + Django前后端分离CSRF问题解决方案
05-11 5389
想直接看代码的移步GitHub： https://github.com/769484623/TestWebServer CSRF 403 Forbidden这个问题从我刚开始做这个前端登录界面的时候就遇到了，但为了不耽误学习进度关闭了Django的CSRF验证选项。 现在快要做完了，就抽出了半天时间来解决了这个问题。 并不难其实，就是网上的资料有点不靠谱= = Django的...
VUE django 跨域、csrf令牌问题
最新发布
qq_41710802的博客
05-30 177
使用VUE django前后分离，跨域跟django CSRF令牌是个很头疼问题，跨域问题解决方法很多，bing一下就有很多这里先略过，主要讲一下令牌用法，取消令牌检测这里有提到。
django的crsf机制防御详解及在前后端分离中post数据到django-vue
weixin_30588675的博客
12-01 228
django的crsf机制防御详解及在前后端分离中post数据到django 更新于:2018-07-28|分类于django CSRF(Cross Site Request Forgery) 跨站点伪造请求 某个用户已经登陆了你的网站，另外有一个恶意的网站有一个指向你网站的链接，那么当用户点击这个链接时，就会请求你的网站，但是你的网站以为是用户发来的请求，这时恶意网站就得逞...
axios通过django的csrf验证
weixin_30709929的博客
07-04 292
django会在浏览器的cookie里面保存一项csrftoken=GvzB3ilhlgadishmascacsilreclherlkjhaklsdv3qx4M96XRG88omScDPQaKoMxJ; 这个是从django生成的，django会检查每个http请求的headers 里面的 X-CSRFToken项的值是否和cookie里面保存的值相同，如果不相同或者缺失，就拒绝这个请求，如...
django ajax前台验证,Django AJAX方式提交数据解决csrf验证问题
weixin_36413157的博客
08-05 143
就是设置axios的headersaxios.defaults.headers.common["X-CSRFToken"] = "{{ csrf_token }}";axios.defaults.baseURL = "http://xx.xx.xx.xx";axios.defaults.headers.common["X-CSRFToken"] = "{{ csrf_token }}";Vue.p...
axios在Django中如何获取csrf成功发送请求
轻编程的博客
09-01 334
<script> var regex = /.*csrftoken=([^;.]*).*$/; // 用于从cookie中匹配 csrftoken值 new Vue({ el: '#app', methods: { request(config){ const instance = axios.create({ ...
Django中使用Ajax时使用CSRF保护
silent_missile的博客
11-05 802
Django中使用Ajax时使用CSRF保护需要服务器设置CSRF的相关选项。并且在客户端读取特定的信息，然后采用特定的格式发送给服务器才能正确处理。
详解Vue-axios 设置请求头问题
10-17
主要介绍了Vue-axios 设置请求头问题,文中给大家提到了axios设置请求头内容的方法，需要的朋友可以参考下
在vue中通过axios异步使用echarts的方法
08-28
在 Vue 中通过 Axios 异步使用 Echarts 的方法 本篇文章主要介绍了在 Vue 中通过 Axios 异步使用 Echarts 的方法。在实际的工作中，数据不可能是像之前的 demo 演示的那样把数据写死的。所有的数据都应该通过发送...
axios压缩包资源，用于异步请求
07-13
axios压缩包资源，用于异步请求
解决vue跨域axios异步通信问题
10-17
主要介绍了解决vue跨域axios异步通信问题，非常不错，具有一定的参考借鉴价值 ,需要的朋友可以参考下
axios异步提交表单数据的几种方法
10-16
首先，当使用axios的`post`方法发送数据时，默认情况下，数据会被序列化为JSON格式，并设置`Content-Type`为`"application/json"`。例如： ```javascript const service = axios.create({}); doLogin(pojo) { ...
Django 配置CSRF（跨站点请求伪造）保护
qq_39046786的博客
06-16 2523
Django 配置CSRF（跨站点请求伪造）保护 配置 在项目的setings.py文件中 添加如下。 MIDDLEWARE = [ 'django.middleware.csrf.CsrfViewMiddleware', ] 跨域请求伪造保护实现主要分为两步 第一步： Django 的 CSRF 保护要求请求的Referer 标头与标头中存在的来源相匹配Host。例如，这可以防止针对 的POST请求subdomain.example.com成功api.example.com。如果您需要
vue + django 前后端分离开发处理 CSRF
狸吉、的博客
03-19 1038
vue + django + CSRF 前后端分离开发处理CSRFCSRF解决方法前后端未分离时的解决方法前后端分离后的解决方法Django 中的实现Vue 中的实现 CSRF CSRF(Cross Site Request Forgery)，跨域请求伪造，挟持用户在当前已登录的 Web 应用程序上执行非本意的操作的攻击方法。 简单地说，是攻击者通过一些技术手段欺骗用户的浏览器去访问一个自己曾经...
前台Vue、后台Django、设置axios解决csrf_token问题
weixin_30793643的博客
06-24 743
详情请点击 转载于:https://www.cnblogs.com/horns/p/11077458.html
django csrftoken
weixin_30662849的博客
04-04 266
CSRF（跨站请求伪造） 背景知识：浏览器在发送请求的时候，会自动带上当前域名对应的cookie内容，发送给服务端，不管这个请求是来源A网站还是其它网站，只要请求的是A网站的链接，就会带上A网站的cookie。浏览器的同源策略并不能阻止CSRF攻击，因为浏览器不会停止js发送请求到服务端，只是在必要的时候拦截了响应的内容。或者说浏览器收到响应之前它不知道该不该拒绝。 攻击过程： 假设abc用...
django vue 前后端分离csrf验证问题
做最好的自己
11-02 4159
django vue-cli3 前后端分离csrf验证前言vue配置部分文件axios.js组件调用部分示例django配置部分views示例 前言 之前写过单独的一篇相关django跨域配置部分配置，故这里忽略。 vue配置部分 文件axios.js let config = { baseURL: 'http://localhost:8000/', xsrfCookieName...
axios 异步请求
08-18
axios 是一个基于 Promise 的 HTTP 客户端，用于发送异步请求。它可以在浏览器和 Node.js 环境中使用。 使用 axios 发送异步请求的基本步骤如下： 1. 首先，你需要在项目中安装 axios。你可以通过 npm 或者 yarn 进行安装： ``` npm install axios ``` 或者 ``` yarn add axios ``` 2. 在需要发送异步请求的文件中，引入 axios 模块： ```javascript import axios from 'axios'; ``` 3. 然后，使用 axios 发送请求。axios 提供了多个方法来发送不同类型的请求，比如 GET、POST 等。以下是一个简单的 GET 请求示例： ```javascript axios.get('https://api.example.com/data') .then(response => { // 请求成功时的处理逻辑 console.log(response.data); }) .catch(error => { // 请求失败时的处理逻辑 console.error(error); }); ``` 在这个示例中，我们使用 `axios.get` 方法发送一个 GET 请求到指定的 URL，并在请求成功时打印出响应数据。如果请求失败，将会在控制台输出错误信息。 除了 GET 请求外，axios 还提供了其他方法，比如 `axios.post`、`axios.put`、`axios.delete` 等，用于发送不同类型的请求。你可以根据实际需求选择适合的方法。 此外，你还可以通过设置请求配置对象来自定义请求参数、请求头等。axios 还支持拦截器、取消请求等高级功能。具体的使用方法可以参考 axios 的官方文档。 希望对你有帮助！如果你还有其他问题，可以继续提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值