通过Ajax发送FormData POST方法返回403 [英] Send FormData through Ajax POST method return 403

问题描述

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

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

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）; 
} 
} 
 
函数sendAudioToServer（soundFile）
 {
 var data = new FormData（）; 
 data.append（'fname'，'test.wav'）; 
 data.append（'data'，soundFile）; 
 
 console.log（soundFile）; 
 console.log（data）; 
 
 $ .ajax（{
类型：'POST'，
 url：'/ recognCommand'，
数据：数据，
 dataType：'jsonp '，
 processData：false，
 contentType：false，
 success：function（data）{
 alert（works！）; 
}，
错误：function（）{
 alert（not works！）; 
} 
}）
  

Java控制器

  @PostMapping（/ recognCommand ）
 public @ResponseBody String recognCommand（@RequestParam MultipartFile mpf）{
 try {
 byte [] bytes = mpf.getBytes（）; 
 SpeechRecognitionApplication.logger.info（字节）; 
} catch（IOException e）{
 e.printStackTrace（）; 
} 
返回完成; 
} 
  

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

我不确定但是FormData可能存在问题。正如您在控制台中打印时所看到的那样，它是空的。在这里提出了一些类似的问题，但没有解决方案来解决我的问题。

编辑：

添加 dataType：'jsonp'

有错误：

编辑2：
添加csrf令牌后：

解决方案

请按此添加csrf代币。

 < meta name =_ csrfth：content = $ {_ csrf.token}/> 
< meta name =_ csrf_headerth：content =$ {_ csrf.headerName}/> 
  

标题：

  var token = $（meta [name ='_ csrf']）。attr（content）; 
 var header = $（meta [name ='_ csrf_header']）。attr（content）; 
  

设置标题。

  $。ajax（{
 type：'POST'，
 url：'/ recognCommand'，
 data：data，
 dataType：'json'， 
 processData：false，
 contentType：false，
 beforeSend：function（xhr）{
 //这里是
 xhr.setRequestHeader（header，token）; 
}，
成功：函数（数据）{
 alert（works！）; 
}，
错误：function（）{
 alert（ 不起作用！）; 
} 
}）
  

尝试添加调试这里指出。

  SpeechRecognitionApplication.logger.info（字节）; 
  

I write an application with speech recognition. All I want is to record some speech and send it to server where I will convert it into text. And I have a problem with sending that sound file. I record voice using p5.js library and when I try to download it there is no problem.

The problem is when I try to send it to server using 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 controller

@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";
}

When I stop recording regardless to toggleRecording function it should stop recording and send it to server. And there is a problem with sendAudioToServer function. Here is the result from Chrome console:

I'm not sure but there is probably problem with FormData. As you can see when I printed it in console it's empty. Founded some similar questions here but there is no solution to solve my problem.

EDIT:

After add dataType: 'jsonp'

There is that error:

EDIT 2: After adding csrf token:

解决方案

Please add csrf tokens as this.

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

In header:

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

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

Try adding debug point here.

 SpeechRecognitionApplication.logger.info(bytes);

这篇关于通过Ajax发送FormData POST方法返回403的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！