解决django前后端一体和前后端分离(前端vue)post请求报403 forbidden的问题

文章目录前后端一体1) 使用templates显示前端html页面2）定义post请求的Form表单3)跨域攻击原理分析4) 解决方法前后端分离前后端一体1) 使用templates显示前端html页面在setings里添加配置,dirs为指定模块下的templates目录文件夹:# 配置dbTEMPLATES = [{'BACKEND': 'django.template.backends.

Dream_it_possible！

3779人浏览 · 2020-11-05 10:09:53

Dream_it_possible！ · 2020-11-05 10:09:53 发布

前后端一体

1) 使用templates显示前端html页面

在setings里添加配置, dirs为指定模块下的templates目录文件夹:

# 配置db
TEMPLATES = [
    {
        'BACKEND': 'django.template.backends.django.DjangoTemplates',
        'DIRS': ["polls.templates"],
        'APP_DIRS': True,
        'OPTIONS': {
            'context_processors': [
                'django.template.context_processors.debug',
                'django.template.context_processors.request',
                'django.contrib.auth.context_processors.auth',
                'django.contrib.messages.context_processors.messages',
            ],
        },
    },
]

目录结构:

2）定义post请求的Form表单

在hello.html页面定义一个Post请求的表单，该请求路由到后端处理，最后返回结果。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用模板创建前端页面</title>
</head>
<body>
这是一个通过template创建出来的页面!

<!--定义一个post请求的表单-->
<form action="/polls/test/form" method="post">
    <input type="submit" value="提交"/>
</form>
</body>
</html>

路由:
path(‘test/form’, FromPostTest.as_view())

class FromPostTest(APIView):

    def post(self, request):
        print("请求成功!")
        return render(request, "index.html")

定义好路由和视图后，我们之间访问hello.html, hello.html页面也是通过路由和视图结合render访问到的:
路由:

    path('hello', views.hello, name='hello'),

视图：

def hello(request):
    return render(request, "hello.html")

访问localhost:8004/polls/hello, 然后点击提交:
在这里插入图片描述

如上，惊人的出现了403的问题!我查阅资料后，才发现这个问题是由于django的中间件引起的, 罪魁祸首就是这个东西

    'django.middleware.csrf.CsrfViewMiddleware',

django使用这个中间件来防御跨域攻击，简单的说就是对提表单的请求，post方式加一个身份验证。

3) 跨域攻击原理分析

在这里插入图片描述

4) 解决方法

在form表单中添加如下代码: {%csrf_token%}, 直接拿到django后台的cscrf_token, 携带此token去访问后台的post请求即可。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用模板创建前端页面</title>
</head>
<body>
这是一个通过template创建出来的页面!

<!--定义一个post请求的表单-->
<form action="/polls/test/form" method="post">
    {% csrf_token %}
    <input type="submit" value="提交"/>
</form>
</body>
</html>

再次访问，并点击提交按钮，没有出现403

前后端分离

在一次项目中，前端使用的是vue,后端使用的是django,我尝试使用上面的方法去添加token,发现还是出现了403的问题。
直接上解决方式: 在请求头里，添加X-CSRFToken, 取自浏览器里的cookie,如下图，cookie和X-CSRFTOKEN, django拿到请求头里的X-CSRFTOKEN与自带的token作比较，即可解决前后端分离出现403的问题！
在这里插入图片描述
refer

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^