# NetworkError when attempting to fetch resource Firefox's “NetworkError when attempting to fetch resource” covers at least 12 causes. We triggered each one and list the console line that names it. Author: Formgong Published: 2026-11-02 Language: en Canonical: https://formgong.com/en/blog/networkerror-when-attempting-to-fetch-resource/ “TypeError: NetworkError when attempting to fetch resource.” is Firefox's message for a fetch() call that got no response your page may read. The request may never have reached the server (wrong address, server down, offline, extension, bad certificate), or the browser may have blocked the answer (missing or wrong CORS headers, mixed content, a Content-Security-Policy). A form whose submit handler calls fetch() without event.preventDefault() also triggers it, because the page reloads and Firefox cancels the request. Open the console and the Network tab: the line next to the error names the real cause. ## What the error means Your code calls `fetch()`, Firefox throws `TypeError: NetworkError when attempting to fetch resource.`, and the `catch` block has nothing more to go on. That is on purpose. When a request fails for a network or security reason, browsers give scripts one generic error, so a page cannot probe which servers exist on your network. Chrome calls the same thing “Failed to fetch”, and Safari says “Load failed”. Our guide to [what “Failed to fetch” means](/en/blog/failed-to-fetch-meaning/) compares the three. The details still exist. Firefox writes them to the console as a separate line, and the Network tab shows what happened to the request. ## Twelve causes, one error We set up small test servers and made `fetch()` fail in every way we could think of, in Firefox, then recorded the console line that came with each failure. Firefox in Playwright 1.63, one `fetch()` POST per row, 1 and 2 November 2026. In all 12 rows the error your code catches was `TypeError: NetworkError when attempting to fetch resource.` Only the console line differed. What was actually wrongFirefox's console line (shortened) Nothing listens on the port`(Reason: CORS request did not succeed). Status code: (null).` The domain does not exist`(Reason: CORS request did not succeed). Status code: (null).` The server closes the connection`(Reason: CORS request did not succeed). Status code: (null).` The browser is offline`(Reason: CORS request did not succeed). Status code: (null).` The API's certificate is self-signed`(Reason: CORS request did not succeed). Status code: (null).` An extension blocks the request`(Reason: CORS request did not succeed). Status code: (null).` The server sends no CORS header`(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 200.` The server allows a different origin`(Reason: CORS header ‘Access-Control-Allow-Origin’ does not match ‘https://www.example.com’).` A JSON request whose preflight gets a 404`(Reason: CORS header ‘Access-Control-Allow-Origin’ missing). Status code: 404.` `credentials: 'include'` with `Access-Control-Allow-Origin: *``(Reason: Credential is not supported if the CORS header ‘Access-Control-Allow-Origin’ is ‘*’).` An HTTPS page calls an `http://` address`Blocked loading mixed active content` The page's Content-Security-Policy blocks it`Content-Security-Policy: The page’s settings blocked the loading of a resource (connect-src)` Six of the twelve rows have nothing to do with CORS: the server was down, the domain did not exist, the connection broke, the browser was offline, the certificate was self-signed, or an extension stopped the request. Firefox still labelled all six “CORS request did not succeed”. MDN's page for that message says the error “is not directly related to CORS”, and it lists the same kind of network failures. If you see it, check that the server is reachable before you touch any CORS settings. The other six are about permission. A missing `Access-Control-Allow-Origin` header, one that names another site, or a `*` combined with `credentials: 'include'` are all server settings. Firefox shows the status code in the first case, and seeing `Status code: 200` next to a failure is a strong hint that the server did its job and only the header is missing. ## The form that reloads under its own request One cause comes from the form's own script rather than the network. If a submit handler calls `fetch()` but does not call `event.preventDefault()`, the browser also does its normal form submit and reloads the page. Firefox cancels the request that was still running, and the handler logs the NetworkError just before the page goes away. In our test the page reloaded to `/?a=1` and the last thing in the console was `form fetch rejected: TypeError: NetworkError when attempting to fetch resource.` So the server may have received the message, or may not, and the user sees a page that simply reloaded with their text gone. ```javascript // The bug: fetch() runs, but the form also submits and the page reloads under it. form.addEventListener("submit", () => { fetch(url, { method: "POST", body: new FormData(form) }); }); // The fix: stop the browser's own submit first. form.addEventListener("submit", async (event) => { event.preventDefault(); const response = await fetch(url, { method: "POST", body: new FormData(form) }); // show a message based on response.ok }); ``` ## How to find your cause Open the console (Ctrl+Shift+K, or Cmd+Option+K on a Mac) and read the line just before the NetworkError. Then open the Network tab, send the form again and click the failed request. A request with no status and a transfer error means it never got an answer: check the address, the server and your extensions, and try a private window. A request with a status code means the server answered and the browser blocked the answer, so the fix is a header on the server. If the request is an `OPTIONS` one, that is the preflight Firefox sends before a JSON POST. It must answer with the CORS headers too, not with a 404 as in our test. Sending the form as normal `FormData` instead of JSON avoids the preflight altogether. ## A form that does not depend on fetch() A plain HTML form that posts to a form backend has none of these failure modes, because the browser's normal submit is not subject to CORS. Formgong takes that post, emails the message, keeps it in an inbox, and shows the visitor a thank-you page. If you prefer to send with `fetch()`, the endpoint sends the CORS headers, so the permission rows in the table do not apply. ```html
``` ## Seeing a console line we did not list? Paste it to us at [support@formgong.com](mailto:support@formgong.com) with your Firefox version. We will reproduce it and add a row. ## What Formgong's free plan includes - **Build the form or bring your own.** The [form builder](/en/tools/form-builder/) takes the colours and fonts from your site's address, with no sign-up; ready [form templates](/en/templates/) copy into your account; AI writes the fields from one sentence. Any hand-written HTML form works too. - **Websites with the form already connected.** 28 free [website templates](/en/website-templates/) post to Formgong out of the box. - **250 submissions a month on unlimited forms.** Spam does not count. Once a year, a busy month keeps delivering on credit until the 7th instead of stopping. - **Everywhere you work.** Email to up to 3 people at once, [Telegram](/en/integrations/telegram/) with Reply and Handled buttons, [Google Sheets](/en/integrations/google-sheets/), [Notion](/en/integrations/notion/), and 3 signed [webhooks](/en/integrations/webhooks/) for Slack, Discord, Zapier, Make or n8n. - **Emails to your customers in your business's name.** Formgong sends them under your business name and replies come back to you, with no email service of your own to set up: a review request to every lead, a reminder a visitor asked for, and review emails after an order with your logo and colours. People who agree can also go straight into your [Mailchimp, Klaviyo, Brevo, MailerLite or Kit](/en/docs/marketing-lists/) list. An automatic reply to each visitor is on Pro. - **No captcha needed.** A server-side spam filter, a honeypot, allowed domains and a block list; add your own Turnstile key if you want one. - **Files and voice.** Visitors can attach files, or record a [voice message](/en/docs/voice-field/) that arrives transcribed. - **Made for AI-built sites.** A hosted form page and a contact button; step-by-step guides for sites built with [Lovable](/en/docs/lovable/), [Bolt](/en/docs/bolt/), [v0](/en/docs/v0/), [Replit](/en/docs/replit/) and [Base44](/en/docs/base44/); an [MCP server](/en/docs/mcp/) lets Cursor or Claude wire the form for you. - **See what the form does.** [Analytics](/en/docs/analytics/) for views, starts, conversion and where each lead came from, and an alert when a form goes quiet. - **One account for the rest.** Customer reviews and an [AI help chat](/en/docs/help-chat/) that answers visitors from your own pages, with every message in one inbox. Data is stored in the EU. ## Frequently asked questions ### What does “NetworkError when attempting to fetch resource” mean? Firefox could not give your script a response: the request failed on the network, or the browser blocked the answer for security. The console line next to it names the actual cause. ### Is it always a CORS problem? No. In our test 6 of 12 causes were plain network failures, such as a server that was down or an offline browser, and Firefox still printed “CORS request did not succeed”. ### Why does it only happen in Firefox? It usually doesn't: Chrome reports the same causes as “Failed to fetch” and Safari as “Load failed”. Only the wording is Firefox's. ### How do I fix it on a contact form? Call event.preventDefault() in the submit handler, check the request in the Network tab, and make sure the server sends Access-Control-Allow-Origin. Or post the form without fetch() to a form backend. ## Sources and documentation - [MDN: Reason: CORS request did not succeed](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS/Errors/CORSDidNotSucceed) - [MDN: Reason: CORS header 'Access-Control-Allow-Origin' missing](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS/Errors/CORSMissingAllowOrigin) - [MDN: Reason: Credential is not supported if the CORS header 'Access-Control-Allow-Origin' is '*'](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CORS/Errors/CORSNotSupportingCredentials) - [MDN: Event.preventDefault()](https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault) - [Add a form to an HTML site](https://formgong.com/en/docs/html/) [Get a form key](https://formgong.com/en/#top)