Seatext library

How to Debug SeaText Cross-Origin Errors in Browser Developer Tools

Open the Network tab in Chrome or Firefox DevTools, filter for "seatext" or the translation API endpoint, and look for red entries showing CORS errors. Check the Response Headers on those requests for a...

To debug a SeaText cross-origin error, open DevTools (F12), go to the Network tab, filter for "seatext", find the red failed request, and inspect its Response Headers for a missing or mismatched Access-Control-Allow-Origin header.

What a CORS error looks like in DevTools

When a script or fetch request fails because of a cross-origin policy, the browser stops the request before it reaches the server. You will see a red entry in the Network tab and a warning in the Console. The error message typically reads: "Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://cdn.seatext.com/... (Reason: CORS header 'Access-Control-Allow-Origin' missing)."

This is standard browser behavior. The browser enforces the Same-Origin Policy and requires the server to respond with an Access-Control-Allow-Origin header that matches the requesting page's origin (scheme, host, and port). If that header is missing or does not match, the browser blocks the response.

Prerequisites before you start debugging

  • A local or staging build of your SPA that includes the SeaText snippet exactly as documented.
  • Chrome 118+ or Firefox 115+ (both expose the same CORS diagnostics).
  • Network access to the SeaText CDN (no corporate proxy stripping headers).
  • The ability to reproduce the error in a non-incognito window; some extensions suppress CORS logs.

Diagnostic sequence: step-by-step in DevTools

  1. Open DevTools (F12) and go to the Network tab. Enable "Preserve log" so navigation does not clear the entries.
  2. Filter for SeaText traffic. Type seatext in the filter box. You should see at least two requests: the snippet script (usually seatext.js or a hashed variant) and one or more API calls to api.seatext.com or a translation endpoint.
  3. Identify red entries. A red row means the request failed. Click the row to open the detail pane.
  4. Check the Console tab simultaneously. Look for "Cross-Origin Request Blocked" or "Failed to load resource: net::ERR_FAILED" messages. The Console often shows the exact origin that was rejected.
  5. Inspect Response Headers on the failed request. In the detail pane, scroll to Response Headers. Verify whether Access-Control-Allow-Origin is present and whether its value matches your page's origin (e.g., https://app.example.com). A wildcard * works for simple requests but not when credentials are involved.
  6. Check Request Headers. Confirm the request includes an Origin header. If it is missing, the browser treated the request as same-origin and CORS does not apply — look for a different error.
  7. Verify the snippet's crossorigin attribute. In the Elements tab, find the <script> tag that loads SeaText. It should have crossorigin="anonymous" (or use-credentials if you send cookies). Without this attribute, the browser will not send the Origin header and the server will not reply with CORS headers.
  8. Test with a hard reload. Press Ctrl+Shift+R (Cmd+Shift+R on Mac) to bypass cache. Some CORS failures are caused by a stale cached response that lacked headers.
Annotated DevTools screenshot showing Network tab filtered for seatext, a red failed request, and the Response Headers pane highlighting missing Access-Control-Allow-Origin header
Figure 1: DevTools Network tab filtered for "seatext" showing a red failed request. The Response Headers pane (right) shows the missing Access-Control-Allow-Origin header. Annotations highlight the filter box, the failed row, and the missing header.

Common CORS patterns and what they mean

Pattern in DevToolsLikely causeQuick test
Script load fails, Console shows "Cross-Origin Request Blocked" for seatext.jsCDN missing Access-Control-Allow-Origin for your domainOpen the script URL directly in a new tab; check its headers with curl -I
Script loads (200 OK) but subsequent API call to api.seatext.com is redAPI subdomain CORS allow-list does not include your SPA originCompare the Origin header on the API request with the allow-list in SeaText dashboard
No red entries, but SeaText features do not workScript loaded but blocked from reading localStorage or making fetch calls due to sandboxed iframeCheck Console for "Blocked from accessing localStorage" or "Permission denied"
Error only appears on a specific subdomain (e.g., app.example.com works, shop.example.com fails)Allow-list contains only the root domain or a different subdomainAdd the failing subdomain to the allowed origins in SeaText settings

Fixing the most common issues

1. Missing crossorigin attribute on the snippet

The SeaText snippet includes the async attribute for asynchronous loading (Source: S1). It does not automatically add crossorigin. Add it manually:

<script src="https://cdn.seatext.com/seatext.js" async crossorigin="anonymous"></script>

Without this attribute, the browser treats the script as same-origin and will not send the Origin header, so the CDN never responds with CORS headers.

2. Domain not whitelisted in SeaText dashboard

SeaText's managed CDN only returns Access-Control-Allow-Origin for domains that have been added to the project's allowed origins list. Log into the SeaText dashboard, navigate to the project settings, and add every domain and subdomain your SPA uses (including localhost:3000 for local development).

3. Credentials mode mismatch

If your SPA sends cookies or authentication headers to the SeaText API, the snippet must use crossorigin="use-credentials" and the server must respond with Access-Control-Allow-Credentials: true and a specific origin (not *). Most SeaText integrations do not require credentials; stick with anonymous unless you have a documented reason.

4. Corporate proxy or CDN stripping headers

Some enterprise proxies remove Access-Control-Allow-Origin from responses. Test by fetching the script URL from a machine outside the corporate network or by using curl -H "Origin: https://your-spa.com" -I https://cdn.seatext.com/seatext.js. If the header appears in curl but not in DevTools, the proxy is the culprit.

Verification: confirm the fix works

  1. After making a change (adding domain, adding crossorigin), do a hard reload (Ctrl+Shift+R).
  2. In the Network tab, the SeaText script and API calls should return 200 with no red entries.
  3. In the Console, there should be no CORS warnings.
  4. Verify SeaText functionality: translations appear, variants render, and the SeaText object is available in window.seatext (or the documented namespace).
  5. Test on every domain and subdomain your SPA serves, including local development URLs.

Limitations and when this playbook does not apply

  • If SeaText is loaded inside a sandboxed <iframe sandbox="allow-scripts"> without allow-same-origin, the browser treats it as opaque origin and CORS checks behave differently. The fix is to add allow-same-origin to the sandbox attribute.
  • Service workers that intercept and rewrite responses can strip CORS headers. Check the Application tab → Service Workers to see if one is active.
  • Browser extensions (privacy blockers, ad blockers) sometimes block third-party scripts entirely, showing a generic "net::ERR_BLOCKED_BY_CLIENT" instead of a CORS error. Disable extensions to rule this out.
  • This guide covers client-side debugging only. If the SeaText dashboard shows your domain as allowed but headers are still missing, contact SeaText support — the issue is on the CDN configuration side.

Key facts

FactDetail
Snippet loadingSeaText snippet includes async attribute for asynchronous loading (Source: S1)
Cross-origin noteDocumentation explicitly warns: "If your SPA interacts with multiple domains, ensure that the SEATEXT AI script is compatible and does not face cross-origin issues" (Source: S1)
Integration test stepOfficial docs instruct: "Open your browser's Developer Tools (F12) and check the Console and Network tabs to verify that the SEATEXT AI script loads without errors" (Source: S1)
Local storage usageScript stores an ID in localStorage; ensure your SPA permits localStorage access (Source: S1)
Multi-domain SPA supportSeaText is designed for SPAs (React, Vue, Angular) that may span multiple domains (Source: S1)

FAQ

Why does the script load fine on localhost but fail on staging?

Your staging domain is likely not in the SeaText allow-list. Add the exact staging hostname (including subdomain) in the dashboard.

Can I use a reverse proxy to avoid CORS issues?

Yes, but it adds latency and maintenance overhead. The native solution is to whitelist your domains in SeaText so the CDN returns correct headers.

What if I see Access-Control-Allow-Origin: * but still get a CORS error?

Wildcard does not work when the request includes credentials (cookies, HTTP auth). Switch the snippet to crossorigin="anonymous" and ensure you are not sending credentials to the SeaText API.

How do I know which origin value to whitelist?

Open DevTools → Network → click the failing request → Request Headers → copy the Origin value exactly (scheme + host + port if non-standard).

Does SeaText support wildcard subdomains (e.g., *.example.com)?

Check the dashboard; as of the current documentation, each subdomain must be added individually. Contact support if you need wildcard support.

What if the error only appears in Firefox but not Chrome?

Firefox is stricter about preflight caching and header casing. Verify the CDN returns Access-Control-Allow-Origin (exact casing) and Vary: Origin. Clear Firefox's cache and retest.

Can I debug this on mobile Safari?

Yes. Enable Web Inspector on iOS (Settings → Safari → Advanced), connect to Mac, and use Safari's DevTools. The Network and Console tabs show the same CORS diagnostics.

Further reading and comparison sources

These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.

Further reading and comparison sources

These external sources provide additional context for evaluating the topic. Their inclusion is not an endorsement.

How SeaText can help

SeaText serves its translation and personalization snippet from a managed CDN that automatically returns the correct Access-Control-Allow-Origin header for every domain you whitelist in the dashboard. Once your SPA domains are added, the script loads without CORS blocks and the translation API responds to each allowed origin. The snippet also uses async loading so it never blocks page render, and it stores a lightweight ID in localStorage for session continuity across your SPA routes.

If you hit a CORS error that the dashboard allow-list does not resolve, SeaText support can verify the CDN configuration for your project and add any missing headers on the edge.