Как я могу отправить два разных значения через axios api моему бэкэнду в одном запросе?

Question

У меня есть бэкэнд из приложения весенней загрузки с REST, с отображением один ко многим. Я хочу назначить Пациенту попечителя, для этого мне нужно отправить оба идентификатора, чтобы я мог найти элементы. Фронтенд является реагирующим js и axios

страница реакции

import React, { Component } from 'react'
import CaregiverApiService from "../../service/CaregiverApiService";

class AddRelationCaregiverPatient extends Component{

    constructor(props){
        super(props);
        this.state ={
        idPac:'',
        idCare:'',
                       message: null
        }
        this.getOne = this.getOne.bind(this);
    }

    getOne = (e) => {
        e.preventDefault();
        let rel = {idPac: this.state.idPac, idCare: this.state.idCare};
            console.log(rel);
               const { idPac, idCare } = this.state;
CaregiverApiService.getOne(idPac,idCare)
            .then(res => {
                this.setState({message : 'Caregiver added successfully.'});
                this.props.history.push('/patients');
            });
    }

    onChange = (e) =>
        this.setState({ [e.target.name]: e.target.value });

    render() {
        return(
            <div>
                <h2 className="text-center">Add Caregiver</h2>
                <form>
                <div className="form-group">
                    <label>Caregiver Name:</label>
                    <input type= "number" placeholder="idPac" name="idPac" className="form-control" value={this.state.idPac} onChange={this.onChange}/>
                </div>

                <div className="form-group">
                    <label>Surname:</label>
                    <input type="number" placeholder="idCare" name="idCare" className="form-control" value={this.state.idCare} onChange={this.onChange}/>
                </div>
                <button className="btn btn-success" onClick={this.getOne}>Save</button>
            </form>
    </div>
        );
    }
}

export default AddRelationCaregiverPatient;

Запрос API, который я пытался сделать

  getOne(idPac,idCare)
    {
    return axios.put(CAREGIVER_PACIENT_API_BASE_URL+'/'+idCare+ '/'+idPac);
    }

Бэкэнд

@RestController
@CrossOrigin
@RequestMapping(value = "/caregiver_patient")
public class caregiver_patientController {
    @Autowired
    private CaregiverService careService;

    @Autowired
    private PatientService patService;
    @PutMapping("/{id}/{id}")
    public ApiResponse<Patient> getOne(@PathVariable int idCare,@PathVariable int idPat){
       PatientViewDTO pp= patService.findPatientByIdPatient(idPat);
        CaregiverViewDTO cc=careService.findCaregiverByIdCaregiver(idCare);
        pp.setCaregiver_idCaregiver(CaregiverViewBuilder.generateEntityFromDTO(cc));
        Patient pat=PatientViewBuilder.generateEntityFromDTO(pp);
        PatientDTO ppat= PatientBuilder.generateDTOFromEntity(pat);
        patService.update(ppat);
        return new ApiResponse<>(HttpStatus.OK.value(), "Patient fetched successfully.",ppat);
    }
//



}

Я получаю сообщение об ошибке и не могу найти решение этой проблемы "HTTP400: ПЛОХОЙ ЗАПРОС - запрос не может быть обработан сервером из-за неверного синтаксиса. (XHR) ОПЦИИ - http://localhost:8080/caregiver-patient/[object Объект] /[объект Объект] "Спасибо!

Answer 1

Я считаю, что ваша проблема в этой строке: CaregiverApiService.getOne(idPac,idCare)

Несколько строк выше idCare объявлен как объект: {idCare: this.state.idCare}.

В результате URL содержит [object Object].

Вы пробовали это:

const { idPac, idCare } = this.state;
CaregiverApiService.getOne(idPac, idCare)

?

Answer 2

Чтобы исправить свое исключение CORS при разработке, просто добавьте app.security.allow-all-origins = true к своему application-dev.properties или разрешите все источники с:

@Configuration
@EnableWebMvc
public class WebConfig implements WebMvcConfigurer {

    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**");
    }
}

Не отвечая на вопрос, более общий совет: выяснение проблемывесенний загрузочный сервер с запросом действительно раздражает без ExceptionHandler.

Добавьте это в свой проект, чтобы сделать вашу жизнь лучше:

import org.slf4j.Logger;
import org.slf4j.LoggerFactory;
import org.springframework.http.HttpStatus;
import org.springframework.http.converter.HttpMessageNotReadableException;
import org.springframework.web.bind.annotation.ExceptionHandler;
import org.springframework.web.bind.annotation.ResponseStatus;

@ControllerAdvice
public class ExceptionHandlerAdvice {
    private final Logger log = LoggerFactory.getLogger(getClass());

    @ExceptionHandler
    @ResponseStatus(HttpStatus.BAD_REQUEST)
    public void handle(HttpMessageNotReadableException e) {
        log.warn("Returning HTTP 400 Bad Request for invalid http message", e);
    }
}