Fetch request fails with "NetworkError when attempting to fetch resource." on beforeunload
Categories
(Core :: DOM: Networking, defect)
Tracking
()
People
(Reporter: bezengi, Unassigned)
References
(Blocks 1 open bug)
Details
User Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_6) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/85.0.4183.121 Safari/537.36
Steps to reproduce:
- Create a simple node.js handler (node version v12.18.0)
require('http').createServer((req, res) => {
res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.end(`
<script>
addEventListener('beforeunload', async (e) => {
console.log('unload: start');
try {
const response = await fetch('', {keepalive: true});
console.log(await response.text());
} catch(e) {
console.error('error', e);
}
console.log('unload: end');
})
</script>
`);
}).listen(3000);
save as server.js
2. Run a web server with node server.js
, open http://localhost:3000/
3. Open dev tools, refresh the page
Actual results:
The console output is
unload: start
error TypeError: NetworkError when attempting to fetch resource.
Navigated to http://localhost:3000/
unload: end
Expected results:
The output should be something like
unload: start
<script>
addEventListener('beforeunload', async (e) => {
console.log('unload: start');
try {
const response = await fetch('', {keepalive: true, method: 'POST', body: 'my data'});
console.log(await response.text());
} catch(e) {
console.error('error', e);
}
console.log('unload: end');
})
</script>
unload: end
Navigated to http://localhost:3000/
(this is what I see in Chrome Version 85.0.4183.121)
Example with post request:
require('http').createServer((req, res) => {
console.log(`Processing ${req.url}, method: ${req.method}`);
if (req.method === 'POST') {
let body = '';
req.on('data', (data) => {
body += data;
})
req.on('end', (data) => {
console.log(`Request body: "${body}"`);
});
}
res.setHeader('Content-Type', 'text/html; charset=utf-8');
res.end(`
<script>
addEventListener('beforeunload', async (e) => {
console.log('unload: start');
try {
const response = await fetch('', {keepalive: true, method: 'POST', body: 'my data'});
console.log(await response.text());
} catch(e) {
console.error('error', e);
}
console.log('unload: end');
})
</script>
`);
}).listen(3000);
Actual result:
Processing /, method: GET
is the only record logged in the node process output
Expected result:
Processing /, method: GET
Processing /, method: POST
Request body: "my data"
record is logged in the node process output
Comment 2•4 years ago
|
||
Setting a component for this issue in order to get the dev team involved.
If you feel it's an incorrect one please feel free to change it to a more appropriate one.
Comment 3•4 years ago
|
||
Thank you for the high quality report.
I don't think the keepalive: true
option makes any difference.
It doesn't seem to be implemented in Firefox yet - see bug 1342484.
Anne, does the standard say anything about this?
Comment 4•4 years ago
|
||
keepalive
would allow for keeping the request alive beyond the lifetime of the document (modulo some constraints). I think that makes this a duplicate.
Comment 5•4 years ago
|
||
(In reply to Anne (:annevk) from comment #4)
keepalive
would allow for keeping the request alive beyond the lifetime of the document (modulo some constraints). I think that makes this a duplicate.
Ah, yes, that makes sense then. Thank you!
Thank you for the reply. Somehow I was under impression that this should've worked in Firefox by now :)
Description
•