Getting has been blocked by CORS policy error - reactjs

Question

The below spring boot code is for controller
#CrossOrigin(origins="*")
#RestController
#RequestMapping("/flights")
public class FlightController {
#Autowired
private FlightService flightService;
#GetMapping("/getall")
public List<FlightsDTO> customer(){
return flightService.getFlights();
}
#GetMapping("/get/{flightId}")
public FlightsDTO CustomerbyId(#PathVariable Integer flightId) {
return flightService.getFlight(flightId);
}
#PostMapping("/save")
public ResponseEntity<FlightsDTO> save(#Valid #RequestBody FlightsDTO prod) {
return new ResponseEntity<FlightsDTO>(flightService.createFlight(prod), HttpStatus.CREATED);
}
#GetMapping("/search")
public List<FlightsDTO> searchProduct(#RequestParam("query") String query){
return flightService.searchFlight(query);
}
#PatchMapping("/partialupdatesourceName/{flightId}/{sourceName}")
public ResponseEntity<FlightsDTO> partialUpdateFlightSource(#PathVariable Integer flightId,#PathVariable String sourceName){
return new ResponseEntity<>(flightService.partialupdateFlightSource(flightId, sourceName),HttpStatus.OK);
}
#PatchMapping("/partialupdatedestinationName/{flightId}/{destinationName}")
public ResponseEntity<FlightsDTO> partialUpdateFlightDestination(#PathVariable Integer flightId,#PathVariable String destinationName){
return new ResponseEntity<>(flightService.partialupdateFlightDestination(flightId, destinationName),HttpStatus.OK);
}
#PatchMapping("/partialupdateprice/{flightId}/{price}")
public ResponseEntity<FlightsDTO> partialUpdateFlightPrice(#PathVariable Integer flightId,#PathVariable Long price){
return new ResponseEntity<>(flightService.partialupdateFlightPrice(flightId, price),HttpStatus.OK);
}
}
The below is the react code
import React, {Component} from "react";
import {Card, Form, Button, Col, Row} from "react-bootstrap";
import { FontAwesomeIcon } from "#fortawesome/react-fontawesome";
import {faSave, faPlusSquare, faUndo} from "#fortawesome/free-solid-svg-icons"
import axios from "axios";
export default class Flights extends Component {
constructor(props){
super(props);
this.state = this.initialState;
this.flightChange = this.flightChange.bind(this);
this.submitFlight = this.submitFlight.bind(this);
}
initialState = {
flightId:'', companyName:'', sourceName:'', destinationName:'', price:''
}
resetFlight = () => {
this.setState(() => this.initialState);
}
submitFlight = event =>{
event.preventDefault();
const flight = {
flightId: this.state.flightId,
companyName: this.state.companyName,
sourceName: this.state.sourceName,
destinationName: this.state.destinationName,
price: this.state.price
};
axios.post("http://localhost:9092/flights/save",flight)
.then(response => {
if(response.data != null){
this.setState(this.initialState);
alert("Flight Saved Successfully");
}
});
}
flightChange = event =>{
this.setState({
[event.target.name]:event.target.value
});
}
render(){
const {flightId, companyName, sourceName, destinationName, price} = this.state;
return(
<Card className={"border border-dark bg-dark text-white"}>
<Card.Header>
<FontAwesomeIcon icon={faPlusSquare}/> Add New Flight
</Card.Header>
<Form onReset={this.resetFlight} onSubmit={this.submitFlight} id="flightFormId">
<Card.Body>
<Row>
<Form.Group as={Col} controlId="formGridFIGHTID">
<Form.Label>Flight ID</Form.Label>
<Form.Control required autoComplete="off"
type = "test" name = "flightId"
value={flightId}
onChange={this.flightChange}
className={"bg-dark text-white"}
placeholder="Enter the Flight Id" />
</Form.Group>
</Row>
<Row>
<Form.Group as={Col} controlId="formGridCompanyName">
<Form.Label>Company Name</Form.Label>
<Form.Control required autoComplete="off"
type = "test" name = "companyName"
value={companyName}
onChange={this.flightChange}
className={"bg-dark text-white"}
placeholder="Enter the Company Name" />
</Form.Group>
</Row>
<Row>
<Form.Group as={Col} controlId="formGridSourceName">
<Form.Label>Source Name</Form.Label>
<Form.Control required autoComplete="off"
type = "test" name = "sourceName"
value={sourceName}
onChange={this.flightChange}
className={"bg-dark text-white"}
placeholder="Enter the Source Name" />
</Form.Group>
</Row>
<Row>
<Form.Group as={Col} controlId="formGridDestinationName">
<Form.Label>Destination Name</Form.Label>
<Form.Control required autoComplete="off"
type = "test" name = "destinationName"
value={destinationName}
onChange={this.flightChange}
className={"bg-dark text-white"}
placeholder="Enter the Destination Name" />
</Form.Group>
</Row>
<Row>
<Form.Group as={Col} controlId="formGridPrice">
<Form.Label>Price</Form.Label>
<Form.Control required autoComplete="off"
type = "test" name = "price"
value={price}
onChange={this.flightChange}
className={"bg-dark text-white"}
placeholder="Enter the Price" />
</Form.Group>
</Row>
</Card.Body>
<Card.Footer style={{"textAlign":"right"}}>
<Button size="sm" variant="success" type="submit">
<FontAwesomeIcon icon={faSave} /> Submit
</Button>
<Button size="sm" variant="info" type="reset">
<FontAwesomeIcon icon={faUndo} /> Reset
</Button>
</Card.Footer>
</Form>
</Card>
);
}
}
After Running the server and submitting the values console is showing this error
error message
I have tried multiple solutions like changed the Cross origin annotation from * to the http://localhost:3000 and also add webMVCConfig but found no luck.
How To resolve this issue? btw I have also given Security to the controller, maybe because of that I am facing this issue.