通过 Ajax POST 方法发送 FormData 返回 403

Question

我编写了一个语音识别应用程序。我想要的只是录制一些语音并将其发送到服务器，在那里我将其转换为文本。我在发送该声音文件时遇到问题。我使用 p5.js 库录制语音，当我尝试下载它时没有问题。

问题是当我尝试使用 ajax 将其发送到服务器时。

script.js

function toggleRecording(e) {
    if (e.classList.contains("recording")) {
        recorder.stop();    
        e.classList.remove("recording"); 
        sendAudioToServer(soundFile)
    } else {
        e.classList.add("recording");
        recorder.record(soundFile);
    }
}

function sendAudioToServer(soundFile)
{
    var data = new FormData();
    data.append('fname', 'test.wav');
    data.append('data', soundFile);

    console.log(soundFile);
    console.log(data);

    $.ajax({
        type: 'POST',
        url: '/recognizeCommand',
        data: data,
        dataType: 'jsonp',
        processData: false,
        contentType: false,
        success: function(data) {
          alert("works!");
        },    
        error: function() {
          alert("not works!");
        }
    })

Java 控制器

@PostMapping("/recognizeCommand")
public @ResponseBody String recognizeCommand(@RequestParam MultipartFile mpf) {
    try {
        byte[] bytes = mpf.getBytes();
        SpeechRecognitionApplication.logger.info(bytes);
    } catch (IOException e) {
        e.printStackTrace();
    }
    return "finish";
}

当我停止录制时，无论toggleRecording 功能如何，它都应该停止录制并将其发送到服务器。 sendAudioToServer 函数有问题。以下是 Chrome 控制台的结果：

我不确定，但 FormData 可能有问题。正如你所看到的，当我在控制台中打印它时它是空的。在这里建立了一些类似的问题，但没有解决我的问题的解决方案。

编辑：

后添加dataType: 'jsonp'

有那个错误：

编辑 2： 添加csrf令牌后：

Answer 1

请像这样添加 csrf 令牌。

    <meta name="_csrf" th:content="${_csrf.token}"/>
    <meta name="_csrf_header" th:content="${_csrf.headerName}"/>

在标题中：

var token = $("meta[name='_csrf']").attr("content");
var header = $("meta[name='_csrf_header']").attr("content");

设置标题。

$.ajax({
    type: 'POST',
    url: '/recognizeCommand',
    data: data,
    dataType: 'json',
    processData: false,
    contentType: false,
    beforeSend: function(xhr) {
            // here it is
            xhr.setRequestHeader(header, token);
        },
    success: function(data) {
      alert("works!");
    },    
    error: function() {
      alert("not works!");
    }
})

尝试在此处添加调试点。

 SpeechRecognitionApplication.logger.info(bytes);

Answer 2

尝试将dataType: 'jsonp' 添加到您的$.ajax 呼叫中，

$.ajax({
    type: 'POST',
    url: '/recognizeCommand',
    data: data,
    dataType: 'jsonp',
    processData: false,
    contentType: false,
    success: function(data) {
      alert("works!");
    },    
    error: function() {
      alert("not works!");
    }
})

希望这会有所帮助！