使用 reactjs 删除 mongodb 中的项目不起作用

Question

我使用reactjs作为前端，使用expressjs作为后端。服务器被一个低功耗勒索软件入侵，但没有影响网站文件本身，但我不得不在mongod实例上添加防火墙，以限制其他IP访问数据库，结果一切都很好，在那之后，我尝试使用前端在数据库中添加一个项目，读取数据工作和添加数据工作都很好。问题是删除。当我使用poster删除时，发送了请求并删除了项目，当使用firefoxdev工具时，我编辑了我的请求以删除特定的项目，它删除了它，但当使用前端时，它什么都不做——没有发送请求，没有给我任何响应，没有状态代码，什么都没有。前端：

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

delAppart方法在ActionCreators文件中

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

考虑到攻击前一切都正常，正如你在前端看到的那样，我尝试使用axios，但没有任何变化后端

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

这是试图删除项目时的网络选项卡。我怀疑第一个选项卡说它是GET类型，应该是DELETE类型。我不确定

Answer 1

这似乎是CORS的一个问题。我建议在这里阅读更多关于它的内容。

此外，在Chrome开发工具的Network选项卡中提供有关网络请求的屏幕截图或更多信息也会很有帮助。