Can't send POST request from react method

I am creating a FB like app with Django and react. In the main page there's a feed where users can create posts and post them to the feed.

I am trying to implement the delete post functionality but I am running into some difficulties.

The logic is: The user clicks on the delete button on a post and the Browser sends and XMLHttpeRequest to the server to delete that post.

Here's the react component:

class Feed extends React.Component {    constructor(props){      super(props);      this.state = {        profile_pic: profile_pic_url,        user: username,        posts: posts_from_server,      }    }      handleClick() {      const text = document.querySelector('#new_post_text').value;      if (text.length > 1) {        const data = {author: username, text: text}        // send that post to the server to save it        const csrftoken = Cookies.get('csrftoken');        const request = new XMLHttpRequest();        request.open('POST', '/create_new_post', true);        request.setRequestHeader('X-CSRFToken', csrftoken);        request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");        request.onload = () => {          const response = JSON.parse(request.responseText)          this.setState({            posts : [{author: response.author, author_picture: profile_pic_url, text: response.text, date: response.date}, ...this.state.posts]          })          document.querySelector("#new_post_text").value = '';          console.log(response)        }        request.send(JSON.stringify(data))      }    }      deletePost(post_id, author) {      const post = document.getElementById(post_id)      post.style.animationPlayState = 'running';      setTimeout(() =>{        this.setState({          posts: this.state.posts.filter(post => post.id != post_id)        })      }, 1000)        // delete the post from the server      const data = {'post_author': author, 'id': post_id}      const csrftoken = Cookies.get('csrftoken');      const request = new XMLHttpRequest();      request.open('POST', '/delete_post', true);      request.setRequestHeader('X-CSRFToken', csrftoken);      request.setRequestHeader("Content-Type", "text/plain;charset=UTF-8");      request.onload = () => {        response = JSON.parse(request.responseText);        console.log(response)      }      request.send(JSON.stringify(data))      }          render() {      return (        <div>          <Post_generator             current_user={this.state.user}            picture={this.state.profile_pic}            onClick={() => this.handleClick()} />            {this.state.posts.map(post => <Post            onClick={() => this.deletePost(post.id, post.author)}             key={post.id}            post_id={post.id}            current_user={this.state.user}            user={post.author}            profile_pic={post.author_picture}            text={post.text}            date={post.date}            />)}        </div>      )    }  }  

this is urls.py:

from django.urls import path  from . import views      urlpatterns = [      path('', views.index, name='login'),      path('login', views.login_view, name='login'),      path('index', views.index, name='index'),      path('register', views.register_view, name='register'),      path('logout', views.logout_view, name='logout'),      path('profile', views.profile, name='profile'),      path('change_profile_pic', views.change_profile_pic, name='upload_profile_pic'),      path('create_new_post', views.create_new_post, name='create_new_post'),      path('<str:friend>', views.friends_profile, name='friends_profile'),      path('delete_post', views.delete_post_function, name='delete_post'),  ]    

and these are the views in views.py handling the two requests:

@login_required  @require_http_methods(['POST'])  def create_new_post(request):      data = json.loads(request.body.decode("utf-8"))      print(data)      new_post = Post(author=request.user, text=data['text'])      new_post.save()      data['date']= new_post.date      return JsonResponse(data)      # delete post   @login_required  @require_http_methods(['POST'])  def delete_post_function(request):      print('sdfgdfsghdsfkgjsdklfg')      response = {"response": "data arrived to server"}      return JsonResponse(response)  

The thing that is giving me trouble is the deletePost() method... When it is executed I get a 405 error in the console.

The funny thing is that the XMLHTTPRequest in the handleClick method works just fine

https://stackoverflow.com/questions/65387459/cant-send-post-request-from-react-method December 21, 2020 at 12:11PM