我使用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类型。我不确定
这似乎是CORS的一个问题。我建议在这里阅读更多关于它的内容。
此外,在Chrome开发工具的Network
选项卡中提供有关网络请求的屏幕截图或更多信息也会很有帮助。