POST 请求适用于 curl 但不适用于 Javascript Web 组件

Question

我对烧瓶休息 API 的 HTTP 发布请求在 curl 上运行良好，但是当尝试使用前端发布时，它说 400 个错误请求，在服务器中，它说没有类型对象不可订阅（request.json['email' ])

这是我的前端代码

const templateSubs = document.createElement("template");

templateSubs.innerHTML = ` 
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<link href="https://fonts.googleapis.com/css2?family=Piazzolla:wght@100&display=swap" rel="stylesheet">

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css"
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ho+j7jyWK8fNQe+A12Hb8AhRq26LrZ/JpcUGGOn+Y7RsweNrtN/tE3MoK7ZeZDyx"
crossorigin="anonymous"></script>  

<div class="card m-5" style="width: 18rem;">
<div class="card-body">
<h1 class="card-title text-center" style="font-family: 'Piazzolla', 'serif';">Attim</h1>
<p class="text-center">Get Latest Updates</p>
<form id="form"  method="post">
<div class="form-group">
<input type="email" class="form-control form-control-sm" id="email" placeholder="user@gmail.com"
aria-describedby="emailHelp" name="email">
<br> <br>
<div class="text-center">
<input type="submit" class="subbtn btn btn-outline-primary btn-sm text">
</div></div>
</form>
</div>
</div>
`;

class SubscriberComp extends HTMLElement {
  constructor() {
    super();
    this.attachShadow({ mode: "open" });
    this.shadowRoot.appendChild(templateSubs.content.cloneNode(true));
  }

   connectedCallback() {
    const form = this.shadowRoot.getElementById('form')
    form.onsubmit = async (e) => {
      e.preventDefault();

      const formData = this.shadowRoot.querySelector('#email').value;
      // console.log(formData)

       /*if (formData.get('email') != null) {*/
      let email = {
        "email": formData
      };
       console.log((email))
      fetch("http://localhost:5002/email/add",{
        method:'POST',
        mode: 'no-cors',
        headers: {
          'Content-Type': 'multipart/form-data'
          // 'Content-Type': 'application/x-www-form-urlencoded',
        },
        body : email
      

      }).then(function(res){
        // return res.json()
        return res;
        
      }).then(function(data){
        console.log(data)
      })
      .catch((err) => {console.log(err)});
  
    }}}


window.customElements.define("subs-comp", SubscriberComp);

> Blockquote

如果有人可以帮助我，我正在尝试从上周解决这个问题，提前致谢

Answer 1

正文格式不正确。它不应该是一个对象，而应该是格式化的表单数据，例如“key1=val1&key2=val2”。所以试试这个：

const email = this.shadowRoot.querySelector('#email').value;
const formData = new FormData();
formData.append('email', email);
console.log(email);
fetch('http://localhost:5002/email/add', {
  method: 'POST',
  mode: 'no-cors',
  headers: {
    'Content-Type': 'multipart/form-data',
    // 'Content-Type': 'application/x-www-form-urlencoded',
  },
  body: formData,
})
  .then(function(res) {
    // return res.json()
    return res;
  })
  .then(function(data) {
    console.log(data);
  })
  .catch(err => {
    console.log(err);
  });

如果服务器实际上想要 JSON，则请求应该看起来像：

const payload = {
  email: formData
};

fetch("http://localhost:5002/email/add",{
  method:'POST',
  mode: 'no-cors',
  headers: {
    'Content-Type': 'application/json'
  },
  body: JSON.stringify(payload)
})