Forbidden (CSRF token missing or incorrect.): /

Question

So i want to make models form to upload file mp3. I was copy the code from website, but suddenly it goes error. Here's error message on the website :

Forbidden (403) CSRF verification failed. Request aborted.

Help Reason given for failure:

CSRF token missing or incorrect.
 In general, this can occur when there is a genuine Cross Site Request Forgery, or when Django's CSRF mechanism has not been used

correctly. For POST forms, you need to ensure:

Your browser is accepting cookies. The view function passes a request to the template's render method. In the template, there is a {% csrf_token %} template tag inside each POST form that targets an internal URL. If you are not using CsrfViewMiddleware, then you must use csrf_protect on any views that use the csrf_token template tag, as well as those that accept the POST data. The form has a valid CSRF token. After logging in in another browser tab or hitting the back button after a login, you may need to reload the page with the form, because the token is rotated after a login. You're seeing the help section of this page because you have DEBUG = True in your Django settings file. Change that to False, and only the initial error message will be displayed.

You can customize this page using the CSRF_FAILURE_VIEW setting.

and at my terminal there's error message :

[12/May/2022 14:19:43] "GET / HTTP/1.1" 200 8824 Forbidden (CSRF token missing or incorrect.): / [12/May/2022 14:19:46] "POST / HTTP/1.1" 403 2513

please help me to fix it. i will give my code :

views.py:

from django.shortcuts import render, redirect
from django.views.decorators.csrf import ensure_csrf_cookie
from .forms import AudioForm
from .models import Audio_store
from MusicLockApp.forms import AudioForm

@ensure_csrf_cookie
def homepage(request):
    # return HttpResponse('homepage')
    return render(request, 'homepage.html')

def decode(request):
    # return HttpResponse('about')
    return render(request, 'decode.html')

def upload(request):
    if request.method == "POST":
        form = AudioForm(request.POST, request.FILES)
        if form.is_valid():
            form.save()
        return redirect("main:upload")
    form = AudioForm()
    audio = Audio_store.objects.all()
    return render(request=request, template_name="homepage.html", context={'form':form, 'audio':audio})

urls.py :

from django.contrib import admin
from django.conf.urls import url
from . import views
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
from django.urls import path, re_path
from django.conf import settings


urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^decode/$', views.decode),
    url(r'^$', views.homepage),
    path('audio', views.Audio_store),
]

urlpatterns += staticfiles_urlpatterns()

models.py:

from django.db import models

class Audio_store(models.Model):
    record=models.FileField(upload_to='media/mp3')

forms.py:

from django import forms 
from .models import Audio_store

class AudioForm(forms.ModelForm):
    class Meta:
        model = Audio_store
        fields=['record']

add settings.py:

INSTALLED_APPS = [
    'MusicLockApp',
    'django.contrib.admin',
    'django.contrib.auth',
    'django.contrib.contenttypes',
    'django.contrib.sessions',
    'django.contrib.messages',
    'django.contrib.staticfiles',
    'crispy_forms',
]

MIDDLEWARE = [
    'django.middleware.security.SecurityMiddleware',
    'django.contrib.sessions.middleware.SessionMiddleware',
    'django.middleware.common.CommonMiddleware',
    'django.middleware.csrf.CsrfViewMiddleware',
    'django.contrib.auth.middleware.AuthenticationMiddleware',
    'django.contrib.messages.middleware.MessageMiddleware',
    'django.middleware.clickjacking.XFrameOptionsMiddleware',
]

STATIC_URL = '/static/'

STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'assets'),
)

MEDIA_URL = '/media/'

MEDIA_ROOT = os.path.join(BASE_DIR, 'media')

{% block content %}  

            {% load crispy_forms_tags %} 

            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <div class="row" style="margin-top: 20px; margin-right: 10px;">
                            <button type="button" class="dsnupload">
                                <i class="large material-icons" style="font-size: 50pt; margin-top: 10px;">file_upload</i>
                                <p style="font-weight: bold; color: white;">Insert file password</p>
                            </button>
                        </div>
                        <br>
                        <div class="row" style="margin-right: 10px;">
                            <form method="POST" enctype="multipart/form-data">
                            {% csrf_token %^}
                            {{form|crispy}}
                            <button type="submit" class="dsnupload">
                                <i class="large material-icons" style="font-size: 50pt; margin-top: 10px;">audiotrack</i>
                                <p style="font-weight: bold; color: white;">Insert file audio (mp3)</p>
                            </button>
                            <p id="message"></p>
                            </form>
                        </div>
                        <br>
                        <div class="row" style="margin-right: 10px;">
                            <div class="col-1">
                                <label class="labels" style="color: white;">Key:</label>
                                <button type="submit" class="dsnupload"></button>
                            </div>
                            <div class="col-11">
                                <input type="text" class="form-control" placeholder="insert your key here">
                            </div>
                            <br> <br>
                            <a class="dsnhide" type="button" href="#" role="button">Hide it!</a>
                        </div>
                    </div>
    
                    <div class="col-md-6">
                        <div class="row" style="margin-top: 20px;">
                            <div class="card" style="height: 13rem;">
                                <div class="card-body">
                                  <h5 class="card-title" style="text-align: center;">
                                      Progressing now
                                  </h5>
                                  <br>
                                  <div class="progress">
                                    <div class="progress-bar progress-bar-striped progress-bar-animated" role="progressbar" aria-valuenow="75" aria-valuemin="0" aria-valuemax="100" style="width: 75%">75%</div>
                                  </div>
                                  <br> <br>
                                  <div class="text-center">
                                    <button id="obfuscate-button" onclick="obfuscate()">Play song</button>
                                    <a class="dsnbtn" type="button" href="#" role="button">Download</a>
                                  </div>
                                </div>
                            </div>
                        </div>
                        <br>
                        <div class="row">
                            <div class="card">
                                <div class="card-body">
                                  <h5 class="card-title">Information Music</h5>
                                  <p class="card-text">Song :</p>
                                  <p class="card-text">Artist :</p>
                                  <p class="card-text">Album :</p>
                                  <p class="card-text">Year :</p>
                                  <p class="card-text">Genre :</p>
                                  <p class="card-text">Duration :</p>
                                </div>
                              </div>
                        </div>
                    </div>
                </div>
            </div>

            {% endblock %}

what i want is = when i click button insert audio file, we can choose file from local and when clicked button hide it, it will upload it to local folder.

website

Answer 1

Easiest way

Try to change this url url(r'^$', views.homepage), in your urls.py file to this url(r'^$', views.upload),

Effective way

Or instead of that, delete your " homepage " view and rename your " upload " view to " homepage ".

Then check if it work. You'll normally see a form appear in your webpage to select your file.