1
나는 firefox webextensions를 실험하고 있습니다. 양식을 제출 한 후 fetch API를 사용하여 HTTP 요청을하고 싶습니다. 문제는 가져 오기 요청이 아무 것도하지 않는다는 것입니다.웹 익스텐션에서 API 가져 오기가 작동하지 않습니다.
document.querySelector("form").addEventListener("submit", fetchTest);
function fetchTest() {
console.log("TEST");
fetch('https://httpbin.org/get')
.then(response => response.json())
.then(response => {
console.log(response);
return response;
})
.catch(error => console.log(error));
}
"browser_action": {
"default_popup": "test.html"
},
"permissions": [
"<all_urls>"
],
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
</head>
<body>
<form>
<button type="submit">Submit</button>
</form>
<script src="test.js"></script>
</body>
</html>
된다
양식의 제출 버튼을 클릭하면 "TE"가 보이기 때문에 내 기능 fetchTest이 호출 된 것을 알 수 있습니다. ST "메시지가 표시됩니다. 그러나 "네트워크"패널의 브라우저에서 요청하는 요청이 없으며 콘솔에 오류가 없습니다. fetch()가 발생하지 않은 것처럼 보입니다.
그럼, XHR과 같은 일을 시도 :이 버전의
function fetchTest() {
console.log("TEST");
const req = new XMLHttpRequest();
req.open('GET', 'https://httpbin.org/get', false);
req.setRequestHeader("Content-Type", "application/json");
req.send(null);
console.log(req);
}
을, 모든 것이 잘 작동한다. "Network (네트워크)"패널에서 요청을보고 내 콘솔에 데이터가 있습니다.
가져 오기 API를 잘못 사용하고 있습니까?
감사합니다 :) input of type submit를 클릭 할 때
'type = "submit"을 HTML에서'type = "button"'으로 바꾸고 코드에서''click "'으로"sumbit "'으로 바꾸면 어떤 변화가 있습니까? 'submit' 입력을 사용하는 것은 적어도 Chrome에서는 좋지 않습니다. 어쩌면 FF는 더 관용 적이지만, 가치가 있습니다. – Xan
감사합니다, 그것은 작동하는 것 :) 나는 왜 그것이 제출 이벤트와 함께 작동하지 않는 이유를 찾을 수 없습니다. 그러나 필드를 클릭 할 때마다 요청이 실행됩니다. 제출 버튼에 ID를 추가하고 버튼에 이벤트 리스너를 추가했습니다. – Ryuu
설명을 추가했습니다. 파이어 폭스가 다른 일을하는지 확실하지 않기 때문에 먼저 테스트 해달라고 부탁했다. – Xan