Question

所以我使用Chrome浏览器，使用Django 1.9.6版，python 2.7.13。

我试图将原始数据（音频文件）从html / js发送到django服务器，以便从.mp3转换为.wav格式。

但是，它甚至没有设置未设置CSRF cookie的views.py。错误。

我已经尝试了几乎所有我能在网上找到的东西。

我有以下views.py和index.html。

的index.html

＆＃13;

<!DOCTYPE html>
<html lang="en-US">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="https://www.w3schools.com/lib/w3.css">
    <title title="Audio Editor">Audio Editor</title>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<main>
  <h1><img src="http://blog.blogtalkradio.com/wp-content/uploads/2011/10/Audio_Icon.jpg" alt="http://blog.blogtalkradio.com/wp-content/uploads/2011/10/Audio_Icon.jpg" style="float:left;width:30px;height:width;"><img src="https://image.freepik.com/free-icon/question-mark_318-52837.jpg" alt="https://image.freepik.com/free-icon/question-mark_318-52837.jpg" style="float:left;width:30px;height:width;"> Obfuscate your audio</h1>
  <br>
  <br>
  <body>
  <h3>1. Upload your audio:</h3>
  <input type="file" id="audio-file" onchange="fileAdded()"/>
  <p id="message"></p>
  <br>
  <h3>2. Obfuscate and download:</h3>
  <button id="obfuscate-button" onclick="obfuscate()">Obfuscate!</button>
  </body>
  <br>
  <br>
  <hr>
  <a href="https://github.com/mgjo5899/web_audio">Check out the github page!</a>
</main>

<script>
var file = undefined;
var audio_formats = ["mp3", "wav"];

// using jQuery
function getCookie(name) {
  var cookieValue = null;

  if (document.cookie && document.cookie !== '') {
    var cookies = document.cookie.split(';');
    for (var i = 0; i < cookies.length; i++) {
      var cookie = jQuery.trim(cookies[i]);
      // Does this cookie string begin with the name we want?
      if (cookie.substring(0, name.length + 1) === (name + '=')) {
        cookieValue = decodeURIComponent(cookie.substring(name.length + 1));
        break;
      }
    }
  }

  return cookieValue;
}

function fileAdded() {
  var x = document.getElementById("audio-file");
  file = x.files[0];
  var msg = document.getElementById("message");

  if (file != undefined) {
    x = file.name.split(".");
    var ext = x[x.length - 1];

    if (audio_formats.indexOf(ext) == -1) {
      msg.innerHTML = ext + " is not an audio file!";
    } else {
      msg.innerHTML = file.name + " has been successfully added!";
    }
  } else {
    msg.innerHTML = "Please select an audio file to obfuscate!";
  }
}

function obfuscate() {
  if (file == undefined)
    alert("Choose an audio file!");
  else {
    var obfuscateButton = document.getElementById("obfuscate-button");
    obfuscateButton.innerHTML = "Proccessing...";
    var xhr = new XMLHttpRequest();
    var url = "http://127.0.0.1:8000/obfuscator/obfuscate/";
    var method = 'POST';
    xhr.onreadystatechange = function() {
      if(xhr.readyState === 4 && xhr.status === 200) {
      	obfuscateButton.innerHTML = "Done!"
      }
    }
    xhr.open(method, url, true);

	xhr.setRequestHeader("X-CSRFToken", getCookie('csrftoken'));

    var formData = new FormData();
    formData.append("audio_file", file);
    formData.append("file_name", file.name)
    xhr.send(formData);
  }
}
</script>
</html>

＆＃13;

view.py

＆＃13;

from django.http import HttpResponse
from django.shortcuts import render
from django.views.decorators.csrf import ensure_csrf_cookie
from subprocess import call
from django.core.files import File
from .forms import UploadFileForm
from django.views.decorators.csrf import csrf_exempt
import subprocess

def index(request):
	return render(request, 'obfuscator/index.html')

#@csrf_exempt
def obfuscate(request):
	print("HI")
	if request.method == 'GET':
		return HttpResponse("Hi")

	if request.method == 'POST':
		print("files: " + str(request.FILES))
		print("posts: " + str(request.POST))

		if len(request.POST) > 0:
			handle_uploaded_file(request.FILES['audio_file'])

	return HttpResponse("The form was valid!")

def handle_uploaded_file(f):
	with open('temp.mp3', 'wb+') as destination:
		for chunk in f.chunks():
			destination.write(chunk)

	subprocess.check_call("ffmpeg -y -i temp.mp3 temp.wav", shell=True)

＆＃13;

我真的不知道为什么这不能在我的电脑上运行（mac OS X）。每次它给我（CSRF cookie not sets）错误，而不是（CSRF令牌丢失或不正确。）错误。

我可以在csrf_exempt中使用它，但我想将它与csrf保护一起使用。

请帮忙！

谢谢。

Answer 1

确实，您的CSRF错误发生是因为您没有在模板中设置csrf cookie

您需要在templat中设置csrf_token，如下所示：

<form action="#" method="POST">
    {% csrf_token %}
    <h3>1. Upload your audio:</h3>
    <input type="file" id="audio-file" onchange="fileAdded()"/>
    <p id="message"></p>
    <br>
    <h3>2. Obfuscate and download:</h3>
    <button id="obfuscate-button" onclick="obfuscate()">Obfuscate!   </button>
</form>

另一方面，也许您可以尝试在呈现模板的视图中使用@ensure_csrf_cookie装饰器

@ensure_csrf_cookie
def index(request):
    return render(request, 'obfuscator/index.html')

Django与html / js错误 - 禁止（未设置CSRF cookie。）

1 个答案: