Vue+Django前后端请求时出现CSRF缺失错误

最新推荐文章于 2023-11-30 17:41:42 发布

林深鹿饮溪

最新推荐文章于 2023-11-30 17:41:42 发布

阅读量710

点赞数 1

文章标签： vue.js django csrf

本文链接：https://blog.csdn.net/qq_43327267/article/details/132610441

版权

在Vue和Django前后端分离项目中，遇到CSRF令牌缺失导致的错误。该问题源于Django的跨域访问检验。解决办法是在Vue的POST请求中添加与cookies匹配的CSRF令牌到headers中。

摘要由CSDN通过智能技术生成

Vue+Django前后端请求时出现CSRF缺失错误

问题再现

最近在做一个项目，选定的是前后端分离开发，后端使用python的Django框架，前端使用Vue.js。在一开始的时候对后端进行编写时，虽然依照RESTFUL规范进行开发的，但是在代码的规范性和美观性上有缺失，所有最近又将其更新为基于类的视图。

export function workdayUpdate(data, token, date) {
   
  return request({
   
    url: '/manage/workday/',
    method: 'put',

最低0.47元/天解锁文章

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

林深鹿饮溪

关注关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
2
评论
复制链接

分享到 QQ

分享到新浪微博

扫一扫

CSRF Failed: CSRF token missing or incorrect

xiaofuge027的博客

12-29

8346

本项目是前后端分离（vue+ Django3）本地测试 Django settings中设置了跨域， post请求没问题；申请了域名使用nginx正式部署项目后，发现post请求报错： CSRF Failed: CSRF token missing or incorrect 问题解析：这是一个django的跨域访问问题。 django，会对合法的跨域访问做这样的检验，cookies里面存储的’csrftoken’，和post的header里面的字段”X-CSRFToken’作比较，只有两

Django接口请求返回报错：CSRF Failed: CSRF token missing or incorrect

西京刀客

08-06

7550

Django接口请求返回报错：CSRF Failed: CSRF token missing or incorrect 问题分析：这是django自带的用户验证机制。 django，会对合法的跨域访问做这样的检验，cookies里面存储的’csrftoken’，和post的header里面的字段”X-CSRFToken’作比较，只有两者匹配，才能通过跨域检验。否则会返回这个错误:CSRF Failed: CSRF token missing or incorrect django默认会有csrf验证.

2 条评论您还未登录，请先登录后发表或查看评论

Django REST Framework 解决 CSRF Failed: CSRF token missing or incorrect.

她°

07-08

4096

出现原因当您使用SessionAuthentication 时，您正在使用 Django 的身份验证，这通常需要检查 CSRF。Django REST Framework 强制执行此操作，仅适用于SessionAuthentication，因此您必须在X-CSRFToken标头中传递 CSRF 令牌。出现场景在对外提供一些开放性 api 时，对方是不需要携带 csrf_token 的，但是在我们框架中是使用了 SessionAuthentication 方式对用户进行认证的，自己使用时我们会遵守认证方

detail: “CSRF Failed: CSRF token missing or incorrect 问题解决方法

qq_28401855的博客

06-19

1880

CSRF Failed: CSRF token missing or incorrect

CSRF Failed: CSRF token missing or incorrect.

Alex

05-06

3835

最近在尝试用Django做后台api接口，用到了自带的用户验证机制：https://docs.djangoproject.co... 在初次登录成功后一直弹出其实并不是跨域问题，而是django自带的用户验证机制我们只需在请求头中添加X-CSRFToken步骤如下：在请求头中添加X-CSRFToken与返回的cookie中的csrftoken便可以（这里用的接口软件为postman）复制粘...

CSRF token missing or incorrect

weixin_30576859的博客

05-05

114

1 在 templete 中, 为每个 POST form 增加一个 {% csrf_token %} tag. 如下: <form> {% csrf_token %} </form> 2 在 view 中, 使用 django.template.RequestContext 而不是 Context. ...

vue+django前后端分离开发一个商城网站.zip

09-29

在本项目中，“vue+django前后端分离开发一个商城网站.zip”是一个包含了使用Vue.js（前端框架）和Django（后端框架）构建的在线商城的源代码压缩包。Vue.js是一个轻量级、高性能的JavaScript库，适用于构建用户界面...

基于Vue+elementUI+django前后端分离员工管理系统

u014552259的博客

08-17

1381

基于Vue+elementUI+django前后端分离员工管理系统不废话上源码链接：https://pan.baidu.com/s/1vTWJLFezQ7XJxaLn6onLrw 提取码：guf0 功能简介 1、首页与员工列表员工列表页面自动请求后端服务查询所有员工信息。前段代码为： 2、查看详细信息 3、修改信息 4、添加员工信息添加员工信息支持照片添加，工号正则匹配，手机号正则匹配、邮箱匹配等。 5、查询功能查询功能知识所有列的信息查找，不需要指定要查找的列。 6、批量添加员工

Django+vue前后端分离项目构建

oliver3455的博客

05-30

3771

Django+vue前后端分离项目构建

vue+Django前后端分离中跨域的问题

m0_45233294的博客

09-02

499

我们通过vue脚手架创建好了一个项目，首先配置Vue请求的基地址：然后通过访问对应的后台API即可获得相应数据： Django 路由配置：启动Django服务器，这里要注意的是Django默认的8080与Vue默认服务器的8080端口冲突，因此我们将Django的端口启动在9000. 然而我们请求成功但是并不能得到后台的数据，这是因为跨域的问题。 django后端允许跨域这个包是用来解决django跨域的，这是我最推荐的一种做法，简单，很多语言中，如C#,J

"CSRF token missing or incorrect."的解决方法.

最新发布

guoqkmiss的博客

11-30

2469

Axios.post。

django ajax post 403 “CSRF token missing or incorrect“报错

weixin_46727201的博客

09-06

972

django Ajax post 403问题

django CSRF token missing or incorrect.

lilovfly的专栏

08-15

313

看http://blog.csdn.net/chen_jint/article/details/12956797

django CSRF token missing or incorrect

qq_37537728的博客

10-23

210

一开始的解决方法： from django.views.decorators.csrf import csrf_exempt @csrf_exempt def post(self, request): """ 短信验证码校验 """ mobile = request.query_params.get('mobile') ...

django出现 CSRF token missing or incorrect 错误

Leo062701的博客

07-12

1741

错误：解决方法：（1）在 urls.py中增加： from django.views.decorators.csrf import csrf_exempt path('algoRegix/', csrf_exempt(views.algoRegix), name='algoRegix'), （2）在algoRegix.html中增加： $(document).ready(f...

vue前端 django 后端解决csrf问题，亲测有效

追梦小狂魔的博客

04-01

2798

首先是后端，用户访问首页的时候通常不会有csrf问题，在这里添加cookie from django.middleware.csrf import get_token csrf_token = get_token(request) response= render(request, "index.html") response.set_cookie('csrf_token', csrf_token) return response 这样csrf就随着cookie一起过去了然后是axios的设置添加请

vue3+Django3实现登陆接口

06-01

在 Vue3 中调用 Django3 的登录接口，需要在 Django3 中编写登录视图，并使用 Django 自带的用户认证系统来验证用户身份。以下是实现步骤： 1. 在 Django3 项目中创建一个 app，并在 app 中创建一个登录视图： ```python from django.contrib.auth import authenticate, login from django.http import JsonResponse from django.views.decorators.csrf import csrf_exempt @csrf_exempt def login_view(request): if request.method == 'POST': username = request.POST.get('username') password = request.POST.get('password') user = authenticate(request, username=username, password=password) if user is not None: login(request, user) return JsonResponse({'success': True}) else: return JsonResponse({'success': False, 'message': '用户名或密码错误'}) ``` 在这里，使用 Django 自带的 `authenticate` 函数来验证用户身份，并使用 `login` 函数将用户登录。登录成功时返回 `{'success': True}`，登录失败时返回 `{'success': False, 'message': '用户名或密码错误'}`。 2. 在 Vue3 组件中使用 axios 发送登录请求： ```javascript import axios from 'axios' export default { data() { return { username: '', password: '' } }, methods: { async login() { try { const response = await axios.post('/api/login/', { username: this.username, password: this.password }) if (response.data.success) { // 登录成功后的逻辑 } else { console.error(response.data.message) // 登录失败后的逻辑 } } catch (error) { console.error(error) // 登录失败后的逻辑 } } } } ``` 在这里，假设 Django3 的登录接口是 `/api/login/`，并且接收 `username` 和 `password` 两个参数。登录成功时调用登录成功后的逻辑，登录失败时调用登录失败后的逻辑。这样就可以在 Vue3 中调用 Django3 的登录接口了。注意，在开发过程中，需要同时启动 Vue3 和 Django3 的开发服务器，并且将 Vue3 的开发服务器代理到 Django3 的开发服务器上。