I have issues when I click button for contact form of html and JavaScript which API of Django rest in heroku it gives this errors: HTTP ERROR 405

Question

method: is POST in HTML and in django is post:

error : This page isn’t working If the problem continues, contact the site owner. HTTP ERROR 405

HTML contact form code

<div class="col-lg-6">
    <form action="" method="post" role="form" class="form-example">
      <div class="form-row">
        <div class="col-md-6 form-group">
          <input type="text" name="name" class="form-control" id="names" placeholder="Your Name" data-rule="minlen:4" data-msg="Please enter at least 4 chars" required />
          <div class="validate"></div>
        </div>
        <div class="col-md-6 form-group">
          <input type="email" class="form-control" name="email" id="emails" placeholder="Your Email" data-rule="email" data-msg="Please enter a valid email" required />
          <div class="validate"></div>
        </div>
      </div>
      <div class="form-group">
        <input type="text" class="form-control" name="subject" id="subjects" placeholder="Subject" data-rule="minlen:4" data-msg="Please enter at least 8 chars of subject" required />
        <div class="validate"></div>
      </div>
      <div class="form-group">
        <textarea class="form-control" name="message" id= "messages" rows="5" data-rule="required" data-msg="Please write something for us" placeholder="Message" required ></textarea>
        <div class="validate"></div>
      </div>

Django view:

class ContactView(APIView):
def post(self, request):
    serailizer_class = ContactSerializer(data=request.data)
    if serailizer_class.is_valid():
        contact = Contact(
            name=serailizer_class.data.get('name'),
            email=serailizer_class.data.get('email'),
            subject=serailizer_class.data.get('subject'),
            message=serailizer_class.data.get('message')

        )
        contact.save()
        email_from = contact.email
        names = contact.name
        send_mail("new contact form submitted", names, email_from, ['reciever@gmail.com'], )
        return Response({"success": "contact Sent"})
    return Response({'success': "Failed"}, status=status.HTTP_400_BAD_REQUEST)

javascript file:

const add_contact =async()=>{
const names = document.getElementById('names').value
const emails = document.getElementById('emails').value
const subjects = document.getElementById('subjects').value
const messages = document.getElementById('messages').value    
    const response = await fetch('https://herokuapp_name.herokuapp.com/contact/',{
        method:"POST",
        body:JSON.stringify({
            name:names,
            email:emails,
            subject:subjects,
            message:messages

        }),
        headers:{
            "Content-Type": "application/json"
        }
    })

    const responseData = await response.json()
    console.log(responseData)
    if(response.ok){
        location.href="../../index.html"
    }else{
        alert(responseData.error)
    }

}

document.getElementById('submit').addEventListener('click',add_contact)

remember: if I test using postman it work well but if I am using front-end web it doesn't work

score 0 · Answer 1 · answered Sep 27 '20 at 08:44

I think you're facing a CORS issue. You can make sure that this is a CORS-thing by checking you browser console and looking for CORS.

Solution is to disable CORS in your browser for chrome you can find useful stuff here: Disable same origin policy in Chrome

Also there's a ton of plugins for this purpose, just google something like Firefox CORS extension.

But what is CORS?

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own. https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS

I have issues when I click button for contact form of html and JavaScript which API of Django rest in heroku it gives this errors: HTTP ERROR 405

1 Answers1