时间戳

首页 > 解决方案 > 使用spring boot Twilio Api反应js axios的帖子正文中缺少必需的参数To

reactjs - 使用spring boot Twilio Api反应js axios的帖子正文中缺少必需的参数To

问题描述

我在执行 Spring Boot 发布 Twilio Api 时遇到问题.. Api 在通过 Spring Boot 执行时工作正常。但是当我使用 axios 在我的 React js 应用程序上集成该 API 时出现“帖子正文中缺少必需的参数”错误。我的 Spring Boot Twilio sendOtpCode 看起来像这样，并且在 api 上使用 Swagger 在 Spring Boot 中使用此方法完全可以正常工作：

 @Override
    public ResponseEntity<?> sendOtpCode(TwilioSendDto twilioSendDto) {
        Twilio.init(accountSid,authToken);
        Verification verification=Verification.creator("VAXXXXXXXXXXXXXXXX",twilioSendDto.getPhoneNumber(),"sms").create();

        return ResponseEntity.status(HttpStatus.OK).body(verification.getStatus());


    }

我的反应代码如下所示：

 sendOtpCode(phoneNumber,message){
    console.log("phone number", phoneNumber);
    return axios.post("http://localhost:8080/twilio",{
      method: 'POST',
    headers: {
      'content-type': 'application/json',
    },
      data:phoneNumber,
 
    
    }
   
    );

AuthService.sendOtpCode(this.state.contactno).then(response =>{
            this.setState({
              message: response.data.message,
              successful: true
            });

我听说过查询字符串的概念，但这也没有帮助我。

  sendOtpCode(phoneNumber,message){
    console.log("phone number", phoneNumber);
    return axios.post("http://localhost:8080/twilio",{
      method: 'POST',
  
      data:qs.stringify(phoneNumber),
      headers: {
        'content-type': 'application/x-www-form-urlencoded;charset=utf-8'
      }
    
    }
   
    );
    

  }

TwilioSendDto 类

package com.saptasoch.ecommerce.model.dto.twilioDto;

public class TwilioSendDto {
    private String phoneNumber;

    public String getPhoneNumber() {
        return phoneNumber;
    }

    public void setPhoneNumber(String phoneNumber) {
        this.phoneNumber = phoneNumber;
    }
}

Twilio 控制器：

ackage com.saptasoch.ecommerce.controller;

import com.saptasoch.ecommerce.model.dto.twilioDto.TwilioMessageDto;
import com.saptasoch.ecommerce.model.dto.twilioDto.TwilioSendDto;
import com.saptasoch.ecommerce.model.dto.twilioDto.TwilioVerifyDto;
import com.saptasoch.ecommerce.service.twilioService.TwilioService;
import io.swagger.annotations.Api;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.http.ResponseEntity;
import org.springframework.web.bind.annotation.*;

@RestController
@CrossOrigin(origins = "*", maxAge = 3600)
@RequestMapping("/twilio")
@Api(value = "/twilio",tags = "twilio", description = "Twilio service")
public class TwilioController {

    @Autowired
    TwilioService twilioService;

    @PostMapping
    ResponseEntity<?> sendOtpCode(@RequestBody TwilioSendDto twilioSendDto){
        return twilioService.sendOtpCode(twilioSendDto);
    }

   
}

标签： reactjsspring-bootaxiostwilio

解决方案

您传递给 API 的请求正文格式不正确。

axios.post("http://localhost:8080/twilio", {
        method: 'POST',
        headers: {
            'content-type': 'application/json',
        },
        data: {
            phoneNumber: phoneNumber
        }});

data应该是表示 TwilioSendDto 类的 JSON。

推荐阅读