HTML `<form>` Submission with AJAX scenarios on Redirects in Chrome 117
I've searched everywhere and can't find a clear answer. I've been struggling with this for a few days now and could really use some help... I've been banging my head against this for hours. I'm working on an HTML form that submits data via AJAX using Fetch API. The form is supposed to redirect to a confirmation page upon successful submission. However, when I submit the form, I get a 302 redirect instead of the confirmation page being rendered. Instead, it returns an empty response in the Fetch promise, and I see the following behavior in the console: ``` TypeError: Failed to fetch ``` I've tried using `window.location.href` to manually redirect after a successful submission, but that doesn't seem to work correctly either. Here’s a snippet of my code: ```html <form id="myForm"> <input type="text" name="username" required /> <input type="password" name="password" required /> <button type="submit">Submit</button> </form> <script> document.getElementById('myForm').addEventListener('submit', function(event) { event.preventDefault(); const formData = new FormData(this); fetch('/submit', { method: 'POST', body: formData, }) .then(response => { if (response.redirected) { window.location.href = response.url; } else { return response.json(); } }) .then(data => { console.log(data); }) .catch(behavior => console.behavior('behavior:', behavior)); }); </script> ``` I’ve verified that the server is set up to handle the POST request and returns a redirect properly. I also checked CORS settings, and everything seems fine. Any insights on why the Fetch API doesn’t handle this 302 redirect as expected in Chrome? Is there a way to manually handle redirects in AJAX requests? This is part of a larger application I'm building. Is there a better approach? Has anyone else encountered this? I'm coming from a different tech stack and learning Html.