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

问题描述

我将reactjs用作前端，将expressjs用作后端。 服务器遭到了低功耗勒索软件的黑客攻击，但是并没有影响网站文件本身，但是我不得不在mongod实例上添加防火墙，以限制其他IP来访问数据库，并且一切都很好，之后我尝试添加一个使用前端在数据库中的项目，它工作正常，可以读取数据并添加数据，但是当我使用邮递员删除请求并发送并删除项目时，删除的问题是确定的；当使用firefox dev工具编辑了我的请求时删除特定的项目并将其删除，但是使用前端时它什么也没做，没有发送请求不会给我任何响应，没有状态码也没有。 前端：

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,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

解决方法

CORS似乎有问题。我建议阅读更多有关here的信息。

此外，在Chrome开发工具的Network标签中获得有关网络请求的屏幕截图或更多信息也将很有帮助。