javascript - POST 请求适用于 curl 但不适用于 Javascript Web 组件
问题描述
我对烧瓶休息 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
如果有人可以帮助我,我正试图从过去一周解决这个问题,在此先感谢
解决方案
正文格式不正确。它不应该是一个对象,而是格式数据,例如“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)
})
推荐阅读
- python-3.x - 在python中将文件从一个文件夹复制到另一个文件夹时出错
- python - 如何使用 np.loadtxt 使 python 只返回有效数据
- python - 从mysql的多个表到python中的一个表
- sonarqube - 创建项目后,如果速度非常快,则通过 api 授予权限失败
- migration - D8 迁移到附加到帐户的 field_ip 地址
- bash - 如何使用 bash 在 yaml 文件的末尾添加缩进行?
- php - Mysql 没有将时间戳转换为 PHP 查询的时区
- python - Python 字典参数传递方法
- php - 当我尝试使用 mthumb.php 库时,图像不会加载
- excel - 用新行更新表