通过AjaxPOST方法发送FormDatareturn403

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

尝试将 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!");
    }
})

希望对您有所帮助！

Answer 2

请按此添加 csrf 令牌。

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

在header中：

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

设置headers.

$.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);

通过AjaxPOST方法发送FormDatareturn403

Send FormData through Ajax POST method return 403

javascript

java

ajax

spring-mvc

p5.js