当前,我正在尝试为自己的chrome扩展程序发出发布请求,并且在控制台中,我一直收到Fetch Failed
作为响应。
popup.html
<!DOCTYPE html>
<html>
<head>
<title>Tube Hunt: Community Curated YouTube Recommendations</title>
<script src="popup.js"></script>
</head>
<body style="width: 15rem; height: 15rem">
<div class="container-fluid" style="padding: 10px">
<a
href="https://www.reddit.com/r/TubeHunt/"
target="_blank"
class="badge badge-secondary"
>/r/TubeHunt</a
>
<form
name="inputForm"
action="https://us-central1-tube-hunt.cloudfunctions.net/app/api/channel/submit"
method="POST"
>
<input
id="url"
value="https://www.youtube.com/c/PickUpLimes"
name="url"
/>
<button type="submit" id="newDetails">Submit</button>
</form>
<button type="button" id="getChannels">Get Channels</button>
</div>
</body>
</html>
popup.js
btn.addEventListener("click", function (e) {
e.preventDefault();
if (url.value) {
console.log(url.value);
let data = new FormData();
const myHeaders = new Headers({
Accept:"application/json, application/xml, text/plain, text/html
});
const baseURL ="myurl";
data.append("url", `${url.value}`);
fetch(baseURL, {
headers: myHeaders,
method: "POST",
body: data,
mode: 'cors'
})
.then((res) => {
console.log(res)
return res.text()
})
.then((html) => console.log(html))
.catch(function (err) {
console.log("Problem");
console.log(err);
});
}
});
根据要求,这里是manifest.json
。如您所见,我在这里添加了服务器的权限。
{
"manifest_version": 2,
"name": "Tube Hunt",
"version": "0.1",
"content_scripts": [
{
"matches": [
"https://www.youtube.com/*"
],
"js": [
"jquery.min.js",
"content.js",
"background.js"
]
}
],
"background": {
"scripts": [
"background.js"
]
},
"browser_action": {
"default_icon": "download.png",
"default_popup": "popup.html"
},
"permissions":[
"https://us-central1-tube-hunt.cloudfunctions.net/app/api/*"
]
}
目前,我可以访问服务器,但从中获取错误代码500
。我能够成功执行GET请求,而不能执行POST请求。除了我的研究之外,我还发现this link的获取没有太大帮助。
答案 0 :(得分:0)
终于解决了!感谢@wOxxOm的所有帮助。
结果是我一直收到500
错误,因为我完全忘记了我的合作伙伴设置服务器/数据库时对其进行了设置,因此特定频道不能有相同的正文内容。除此之外,上面的代码对我有用。感谢您的所有帮助!