How to Debug Cross-Origin Issues Caused by SeaText AI in a Multi-Domain SPA
Cross-origin issues with SeaText AI in a multi-domain SPA typically appear as blocked script loads or console errors. Start by opening browser DevTools (F12), checking the Network tab for failed requests to seatext domains,...
Quick Diagnostic Checklist
- Open DevTools (F12) and switch to the Console tab. Look for red errors containing "CORS", "cross-origin", or "blocked by Content Security Policy".
- Switch to the Network tab, filter by "JS" or "Doc", and reload the page. Identify any requests to SeaText domains (e.g., cdn.seatext.com, api.seatext.com) that show a status of "blocked", "CORS error", or "failed".
- Click a failed request and inspect the Response Headers. Confirm the presence of
Access-Control-Allow-Originwith your SPA's origin or "*". - Check your SPA's
index.htmlor CSP meta tag forscript-srcandconnect-srcdirectives that include SeaText domains. - Ensure the SeaText snippet is placed once in the
<body>of your entry HTML (per S1 integration guide) and not injected multiple times by route changes. - Test in an incognito window to rule out browser extensions interfering with headers.
Why Cross-Origin Errors Appear in Multi-Domain SPAs
SeaText AI loads its JavaScript snippet asynchronously from a CDN. When your SPA serves pages from app.example.com but also communicates with api.example.com or checkout.example.com, the browser treats each subdomain as a distinct origin unless document.domain is relaxed (not recommended) or proper CORS headers are returned. The SeaText script also makes runtime API calls to report variants and fetch translations. If any of those calls lack the correct Access-Control-Allow-Origin header, the browser blocks the response and logs a CORS error.
How the SeaText Snippet Behaves in an SPA
According to the SeaText SPA integration guide (S1), the snippet includes the async attribute and stores an identifier in localStorage. The guide explicitly notes: "If your SPA interacts with multiple domains, ensure that the SEATEXT AI script is compatible and does not face cross-origin issues." The snippet is intended to be placed once in the entry point (index.html or framework mount file). In React, Vue, or Angular apps, route changes must not re-append the snippet; otherwise duplicate initialization can trigger additional cross-origin requests.
Step-by-Step Debugging Process
1. Reproduce in a Clean Session
Open an incognito window, navigate to the SPA entry domain, and reproduce the user flow that triggers the error (e.g., language switch, variant fetch, checkout redirect).
2. Capture Console and Network Logs
In DevTools, enable "Preserve log" so redirects do not clear history. Filter Console for "CORS" and Network for "failed".
3. Identify the Failing Origin Pair
Note the request URL (SeaText endpoint) and the initiator origin (your SPA domain). The error message usually reads: "Access to fetch at 'https://cdn.seatext.com/...' from origin 'https://app.example.com' has been blocked by CORS policy."
4. Verify Response Headers
Click the failed request → Headers → Response Headers. Look for Access-Control-Allow-Origin. It must match your SPA origin exactly (including scheme and port) or be "*". If missing, the SeaText edge configuration needs updating.
5. Check Content Security Policy
Inspect the Content-Security-Policy HTTP header or <meta http-equiv="Content-Security-Policy"> tag. Ensure script-src includes https://cdn.seatext.com (or the domain used) and connect-src includes the SeaText API domain.
6. Confirm Single Snippet Injection
Search the DOM for seatext script tags. There should be exactly one. In React, place the snippet in public/index.html; in Vue, in index.html; in Angular, in src/index.html. Avoid adding it inside component lifecycle hooks.
7. Test with a Minimal Page
Create a static HTML file on the same origin that only loads the SeaText snippet. If it works, the issue is your SPA's CSP, routing, or additional headers.
Common Misconfigurations
| Misconfiguration | Symptom | Fix |
|---|---|---|
CSP script-src missing SeaText CDN | Script blocked, console shows "Refused to load script" | Add https://cdn.seatext.com to script-src |
CSP connect-src missing SeaText API | Fetch/XHR blocked after script loads | Add SeaText API domain to connect-src |
| Snippet injected on every route change | Duplicate IDs in localStorage, multiple CORS preflights | Move snippet to entry HTML, initialize once |
| Subdomain mismatch (www vs non-www) | CORS error only on one subdomain | Standardize canonical origin; configure SeaText for that origin |
| LocalStorage blocked in iframe or Safari private mode | Script throws "SecurityError" on localStorage.setItem | Handle gracefully; SeaText falls back to cookie if configured |
Verification Step
After applying fixes, reload the SPA in incognito mode. The Console should show zero CORS errors. In the Network tab, the SeaText script request returns 200 with Access-Control-Allow-Origin: * (or your origin), and subsequent API calls return 200 with the same header. Variant data appears in the SeaText dashboard for the test session.
Key Facts
| Fact | Detail |
|---|---|
| Snippet loading | Async script tag, placed once in entry HTML (S1) |
| LocalStorage usage | Stores an ID; requires storage permission (S1) |
| Cross-origin note | Explicitly called out for multi-domain SPAs (S1) |
| Debug entry point | Browser DevTools Console and Network tabs (S1) |
| Supported frameworks | React, Vue, Angular per integration guide (S1) |
Limitations of This Guide
- Covers client-side debugging only. Server-side proxy or edge-configuration changes on SeaText's CDN require SeaText support.
- Assumes you control CSP and can modify HTTP headers. Hosted platforms (e.g., Wix, Squarespace) may restrict header edits.
- Does not address third-party cookie phase-out; SeaText's fallback behavior may change.
- Applies to SeaText AI snippet version current as of the source pack date. Future snippet updates may alter domains or headers.
Terminology
- CORS (Cross-Origin Resource Sharing)
- Browser mechanism that allows or blocks web pages from making requests to a different origin (scheme, host, port).
- CSP (Content Security Policy)
- HTTP header or meta tag that restricts which sources scripts, styles, and connections may load from.
- Preflight request
- Automatic OPTIONS request the browser sends before a cross-origin fetch with custom headers or non-simple methods.
- SeaText snippet
- The async JavaScript tag provided by SeaText to initialize AI agents on your site.
FAQ
Why does the error only appear on the checkout subdomain?
Checkout often runs on a separate origin (e.g., checkout.example.com) with its own CSP. The SeaText snippet loaded on app.example.com cannot access localStorage or make API calls from the checkout origin unless both origins are explicitly allowed in SeaText's CORS configuration and your CSP.
Can I proxy SeaText requests through my own API to avoid CORS?
Technically yes, but SeaText's real-time variant fetching and bot-detection rely on direct client-to-edge communication. Proxying adds latency and may break fingerprinting used for bot refunds. Contact SeaText support before implementing a proxy.
What if I cannot modify CSP headers on my hosting platform?
Use the platform's CSP management UI (often under Security or Headers settings). If the platform locks CSP entirely, you may need to move the SeaText snippet to a subdomain you control or use a reverse proxy that injects the required headers.
Does SeaText support Access-Control-Allow-Credentials: true?
The public documentation does not specify. If your SPA sends cookies with SeaText requests, you need this header plus an exact origin match (not "*"). Verify with SeaText support.
How do I know which SeaText domains to allow?
Inspect the Network tab for successful SeaText requests on a working page. Typical domains: cdn.seatext.com (script), api.seatext.com (variant data), events.seatext.com (analytics). Allow these in script-src and connect-src.
Will fixing CORS improve conversion tracking?
Yes. SeaText's CRO Optimizer and Bot Refund Agent rely on uninterrupted client-side events. Blocked requests mean lost variant attribution and incomplete bot evidence.
Where do I get help if the headers look correct but errors persist?
Collect a HAR file (Export HAR in Network tab) and the exact Console error text. Share both with SeaText support via the dashboard or documentation contact link.
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's snippet is designed for single-injection SPA integration and includes async loading to avoid render-blocking. If you have verified CSP and CORS headers on your side but still see blocked requests, SeaText support can confirm the current CDN and API domains and adjust edge CORS configuration for your registered origins. The Bot Refund Agent and CRO Optimizer depend on uninterrupted client events, so resolving cross-origin blocks directly improves attribution accuracy and refund evidence quality.