Deleting items in mongodb using reactjs doesn't work - reactjs

Question

I'm using reactjs as frontend and expressjs as backend.
the server got hacked with a low power ransomware but didn't affect the website files themselves but i had to add firewall on mongod instances to limit the other IPs to access the database and it all worked out great, after that i tried to add an item in the database using the frontend and it worked alright reading the data works and adding data works the problem was with the deleting when i delete using postman the request is sent and deletes the item ok, and when using firefox dev tools i edited my request to delete the specific item and it deleted it but when using frontend it doesn't do anything no request is sent doesn't give me any response no status codes no nothing.
The Frontend:
class AdminCardComp extends Component {
constructor(props) {
super(props);
this.state = {
appartmentId: ''
};
this.onChange = this.onChange.bind(this);
this.handleRemove = this.handleRemove.bind(this);
}
onChange(e) {
if (e.target.id === 'appartmentId') {
this.setState({ appartmentId: e.target.value });
}
}
handleRemove(){
this.props.delAppartment(this.state.appartmentId);
/*axios.delete("http://172.105.245.241:3443/appartments/"+this.state.ID,{ params: { appartmendId: this.state.ID }} , {}).then(res => {
console.log(res.data)
})*/
}
render() {
const appartmentRender = this.props.appartments.appartments.map((appartment) => {
var x = 1;
return(
<Card>
<CardImg top src={baseUrl + appartment.image[0].image} alt={appartment.name} />
<CardBody>
<CardTitle>Appartment Number: {x}</CardTitle>
<CardText>Appartment Description: {appartment.description}</CardText>
<CardText>Appartment Price: {appartment.price}</CardText>
</CardBody>
<CardFooter>
<CardText>App ID: {appartment._id}</CardText>
</CardFooter>
</Card>
);
x++;
})
return (
<>
<div className="container col-12">
<div className="row row-content col-12 col-sm-6">
{appartmentRender}
</div>
<div className="row row-content col-12 col-sm-6 justify-content-center">
<Form onSubmit={this.handleRemove}>
<Row>
<Col>
<Input className="formBack" onChange={this.onChange} type="text" id="appartmentId" name="appartmentId" placeholder="Enter ID" innerRef={(input) => this.appartmentId = input} />
</Col>
</Row>
<Row>
<Col>
<Button className="offset-sm-3 col-sm-5 buttonmr formBackButton" type="submit" value="submit">Remove</Button>
</Col>
</Row>
</Form>
</div>
</div>
</>
);
}
}
the delAppart method is in the ActionCreators file
export const delAppartment = (appartmentId) => (dispatch) => {
const bearer = 'Bearer' + localStorage.getItem('token');
return fetch(baseUrl + 'appartments/' + appartmentId ,{
method: "DELETE",
body: JSON.stringify({ "_id": appartmentId }),
headers: {
"Content-Type": "application/json"
},
credentials: "same-origin"
})
.then(response => {
if(response.ok){
return response;
}else {
var error = new Error('Error ' + response.status + ': ' + response.statusText);
error.response = response;
throw error;
}
},error => {
throw error;
})
}
given that everything worked before the attack, and as you see in the frontend i tried using axios and nothing has changed
The Backend
appartRouter.route('/:appartmentId')
.options((req,res) => {
res.sendStatus(200);
})
.get((req,res,next) =>{
Appartments.findById(req.params.appartmentId)
.then((appartment) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'application/json');
res.json(appartment);
}, (err) => next(err))
.catch((err) => next(err));
})
.delete((req,res,next) =>{
Appartments.findByIdAndRemove(req.params.appartmentId)
.then((resp) => {
res.statusCode = 200;
res.setHeader('Content-Type', 'application/json');
res.json(resp);
}, (err) => next(err))
.catch((err) => next(err));
})
This is the networks tab when trying to remove an item i suspect the first one says it's a GET type and it should've been DELETE type i'm not sure

Answer 1

It seems to be a problem with CORS. I would recommend to read more about it here.
Also it would be helpful to have a screenshot or more info about the network request in the Network tab in Chrome Dev Tools.