How to Fix CORS Errors When Submitting a Form

You wired your form up with fetch(), hit submit, and the console throws:

Access to fetch at 'https://…/f/YOUR_FORM_ID' from origin 'https://yoursite.com'
has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is
present on the requested resource.

Your request probably did reach the server — the browser just refused to let your JavaScript read the response. This guide explains what that means, why it happens when a form posts to a different origin, and the handful of ways to fix it (including the one that sidesteps CORS entirely).

What CORS actually is

CORS (Cross-Origin Resource Sharing) is a browser rule: when your JavaScript fetch()es a URL on a different origin than the page, the browser only hands you the response if that server opts in with an Access-Control-Allow-Origin header naming your origin. Your form's action lives on shipmyform.com; your page lives on yoursite.com — different origin — so the check applies.

It's enforced by the browser, not the server. That's why the same request works fine from curl or your backend but fails in the browser.

The escape hatch: a plain form POST has no CORS

Here's the part people miss. CORS only applies to requests your script reads. A normal HTML form submit is a navigation — the browser posts and follows the response — so CORS never applies to it:

<form action="https://shipmyform.com/f/YOUR_FORM_ID" method="POST">
  <input name="email" type="email" required />
  <textarea name="message" required></textarea>
  <button type="submit">Send</button>
</form>

This works cross-origin, today, with zero configuration. If you don't strictly need an inline success state, this is the simplest "fix." You only meet CORS when you switch to fetch() to avoid a page reload — which is worth it for the UX, so here's how to get it right.

The real fix for fetch(): allow your origin

When you fetch() cross-origin, the server has to return your origin in Access-Control-Allow-Origin. A form backend decides that from its allowed-origins list. If your site isn't on it, the endpoint omits the header and the browser blocks the read — the exact error above.

With ShipMyForm: open the form's Settings → Allowed domains and add your site (e.g. yoursite.com). The endpoint then reflects your origin back in the CORS header and the fetch succeeds. Adding yoursite.com also covers its subdomains like www.yoursite.com.

const res = await fetch("https://shipmyform.com/f/YOUR_FORM_ID", {
  method: "POST",
  headers: { Accept: "application/json" },
  body: new FormData(form),
});
const data = await res.json(); // now readable: { ok: true } or a 422 with fields

Preflights and JSON bodies

For some requests the browser sends a preflight — an OPTIONS request that asks permission before the real one. It's triggered by "non-simple" requests, most commonly a Content-Type: application/json body:

Accept: application/json is itself safelisted, so it never forces a preflight — only the JSON content type does. ShipMyForm answers the OPTIONS preflight automatically (with the same allowed-origin logic), so JSON works too — but if you want to avoid the extra round-trip, send a FormData body. It's also simpler and handles file inputs.

Common mistakes that cause (or fake) CORS errors

• Origin not in the allowed list — the number-one cause. Add your exact domain. Watch http vs https and www vs apex.
• Reaching for mode: 'no-cors' — this doesn't fix anything. It returns an opaque response: res.ok is always false-ish, res.json() throws, and you can't read { ok: true } or validation errors. Never use it here.
• credentials: 'include' — a public form endpoint uses no cookies, so don't set this. Combined with a wildcard origin it actually causes a CORS failure.
• Wrong URL — a typo'd form ID or an http:// endpoint on an https:// page (mixed content) surfaces as a network/CORS-looking error.
• Assuming the POST failed — a CORS block happens after a successful request in many cases; your submission may already be stored. Fix the header, don't resubmit blindly.

Quick checklist

1. Submitting with fetch()? Add your site to the form's allowed domains.
2. Prefer a FormData body to skip the preflight.
3. Never use mode: 'no-cors' or credentials: 'include'.
4. Just want it working with no JS? Use a plain <form action> — no CORS at all.

Next steps

• The full pattern: submit a form with fetch().
• Doing it in a component? Next.js form handling.
• Start free — 100 submissions a month, no card required.