当我点击html和JavaScript的联系人表单的按钮时，我遇到了问题，Django的哪个API在heroku中休息，它给出了以下错误：HTTP错误405

方法：在HTML中是POST，在django中是POST:

错误：此页面无法工作如果问题仍然存在，请与网站所有者联系。HTTP错误405

HTML联系人表单代码

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

javascript文件：

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)

---

记住：如果我使用postman进行测试，它工作得很好，但是如果我使用前端web，它不工作

我认为您面临一个CORS问题。通过检查浏览器控制台并查找CORS，可以确保这是CORS

解决方案是在chrome浏览器中禁用CORS。您可以在此处找到有用的内容：

此外，还有大量的插件用于此目的，比如谷歌（google）之类的

Firefox-CORS-extension

但是什么是CORS

跨源资源共享（CORS）是一种机制，它使用额外的HTTP头告诉浏览器，让运行在一个源上的web应用程序访问来自不同源的选定资源。web应用程序从其自身请求具有不同来源（域、协议或端口）的资源时，会执行跨来源HTTP请求。

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)