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

希望这会有所帮助！

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

2 个答案: