How to Fix a CORS Error When Submitting a Form
Understand why CORS blocks your AJAX form submission and fix it — including the correct Accept header and an allowed-origins allowlist.
How do you fix a CORS error when submitting a form?
A CORS error on form submission usually means your request is missing the `Accept: application/json` header or the receiving endpoint does not allow your origin. Send the header on every AJAX POST and configure the backend’s allowed-origins list to include your domain.
What the Error Means
Browsers enforce the same-origin policy: an AJAX POST from `example.com` to an API on another origin is blocked unless the API responds with the right CORS headers. A plain HTML form POST (non-AJAX) is never CORS-blocked — only fetch/XHR requests are.
Fix 1: Send the Accept Header
Form2Lead requires an `Accept: application/json` header for AJAX submissions so it can respond with a JSON payload instead of a redirect.
const res = await fetch('https://form2lead.com/api/v1/f/YOUR_FORM_ID', {
method: 'POST',
body: new FormData(form),
headers: { 'Accept': 'application/json' },
});Fix 2: Add Your Origin to the Allowlist
If the server rejects your origin, add it to the backend’s allowed-origins list. In Form2Lead, that is the form’s Allowed Domains setting — add your exact domain, for example `example.com` or `app.example.com`.
Fix 3: Avoid the Preflight Trap
Custom headers or `application/json` content types trigger a CORS preflight. If you post `FormData`, the browser sends a simple request and no preflight — the least error-prone path.
How-To Q&A
Why does my plain HTML form submit without a CORS error?
A classic form POST navigates the page and is not subject to CORS. Form2Lead accepts both styles — non-AJAX posts get a redirect response.