Блог

У меня возникли проблемы при выполнении spring boot post Twilio Api.. API отлично работает при выполнении через spring boot.Но когда я интегрировал этот API в свое приложение React js, используя axios, возникает ошибка «Отсутствует требуемый параметр в теле сообщения». Мой код отправки Twilio Spring boot выглядит следующим образом, и этот метод в 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());


    }
  

Мой код react выглядит следующим образом :

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

Я слышал о концепции querystring, но это также не помогло мне.

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

   
}
  

Тело запроса, которое вы передаете в API, имеет неправильный формат.

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

data должен быть JSON, представляющий класс TwilioSendDto.

Это решило мою проблему.

  sendOtpCode(phoneNumber) {
    return axios
      .post("http://localhost:8080/twilio", {
        phoneNumber
        
      })
      
  }
  

Это была моя ошибка, я добавлял заголовки без необходимости.