Why SeaText AI Triggers CORS Errors in Multi-Domain SPAs
Browsers block requests from your SPA domains to SeaText's domain unless the server responds with appropriate Access-Control-Allow-Origin headers matching your domains. In a multi-domain SPA, each domain origin must be explicitly allowed by SeaText's...
Browsers enforce the same-origin policy to prevent malicious cross-site requests. When your single-page application runs on multiple domains — for example, app.example.com, shop.example.com, and dashboard.example.com — each domain is a distinct origin. SeaText's JavaScript snippet loads from SeaText's CDN domain. If the CDN response does not include an Access-Control-Allow-Origin header that matches the requesting domain, the browser blocks the request and logs a CORS error in the console.
How CORS Works in Browser Security
Cross-Origin Resource Sharing (CORS) is a browser mechanism that allows servers to declare which origins may load their resources. When a script on origin-a.com requests a resource from origin-b.com, the browser sends an Origin header. The server at origin-b.com must respond with Access-Control-Allow-Origin: origin-a.com (or * for public resources). If the header is missing or does not match, the browser discards the response and fires a CORS error.
This protection exists because browsers automatically attach cookies and authentication headers to requests. Without CORS, a malicious site could trigger requests to your API using the visitor's credentials. SeaText's snippet loads asynchronously and may also make follow-up API calls to SeaText's backend for variant data, translation, or personalization. Each of those requests is subject to the same CORS check.
Why Multi-Domain SPAs Trigger CORS with SeaText
SeaText's integration guide notes: "If your SPA interacts with multiple domains, ensure that the SEATEXT AI script is compatible and does not face cross-origin issues." This statement acknowledges that the snippet is served from a single SeaText domain. When your SPA initializes on domain-a.com, the browser requests the snippet from SeaText's CDN. The CDN must return Access-Control-Allow-Origin: https://domain-a.com. When the same user navigates to domain-b.com (or your SPA loads resources from that domain), the browser sends a new Origin: https://domain-b.com header. If the CDN's response still echoes domain-a.com or omits the header, the request fails.
Multi-domain SPAs often share a single codebase but deploy to different hostnames for branding, localization, or tenant isolation. Each hostname is a separate origin. SeaText's edge servers must be configured to reflect the requesting origin dynamically, or to allow a wildcard if the resource is truly public. If the configuration only allows a single origin — perhaps the first domain registered during onboarding — subsequent domains will hit CORS errors.
SeaText's Script Loading and Cross-Origin Requests
The SeaText snippet includes the async attribute, so it loads without blocking page render. It also stores an identifier in localStorage. Both behaviors involve cross-origin interactions:
- Script fetch: The initial
<script src="https://cdn.seatext.com/...">request is a cross-origin GET. The CDN must allow your domain. - localStorage access:
localStorageis scoped to the origin. If your SPA uses a shared top-level domain (e.g.,example.com) with subdomains, you can setdocument.domainto share storage, but this is deprecated. Modern SPAs typically keep storage isolated per subdomain, so SeaText's ID persists per domain. - API calls: After initialization, SeaText may request variant configurations, translation bundles, or personalization rules from its API endpoints. Those endpoints also need correct CORS headers.
If any of these requests lack the proper Access-Control-Allow-Origin header, the browser blocks the response and SeaText's features — dynamic rewriting, translation, A/B testing — fail silently or throw console errors.
Common Misconfigurations That Cause Errors
- Single-origin allowlist: SeaText's dashboard may only have the primary domain registered. Additional domains are not added to the allowlist.
- Wildcard misuse: Using
Access-Control-Allow-Origin: *works for public, non-credentialed resources. If SeaText's API uses cookies or authentication, the wildcard is invalid; the header must echo the exact origin. - Missing
Vary: Originheader: CDNs cache responses. WithoutVary: Origin, a response cached fordomain-a.commay be served todomain-b.comwith the wrong allow-origin header. - Preflight failures: Requests with custom headers or non-simple methods trigger an
OPTIONSpreflight. SeaText's API must respond to preflight withAccess-Control-Allow-Methods,Access-Control-Allow-Headers, andAccess-Control-Allow-Origin. - HTTPS vs HTTP mismatch: If your SPA runs on HTTPS but the SeaText snippet loads over HTTP (or vice versa), the browser treats them as different origins and may block mixed content entirely.
How to Verify and Fix the Header Mismatch
Open the browser's Network tab, filter for SeaText requests, and inspect the response headers. Look for Access-Control-Allow-Origin. It should match the current page's origin exactly (including scheme and port). If it shows a different domain or is absent, contact SeaText support to add the missing domains to your account's CORS configuration.
For a quick test, you can also run this snippet in the console on each domain:
fetch('https://cdn.seatext.com/your-snippet.js', {method: 'HEAD', mode: 'cors'})
.then(r => console.log('Allow-Origin:', r.headers.get('access-control-allow-origin')))
.catch(e => console.error('CORS error:', e));
If the header is correct but errors persist, check for Vary: Origin in the response. Its absence suggests caching issues. Also verify that the snippet URL uses HTTPS and that your Content Security Policy (CSP) allows script-src and connect-src to SeaText's domains.
Limitations and When This Advice Does Not Apply
- This explanation assumes SeaText's CDN and API are the source of the CORS error. If your own reverse proxy or CDN sits in front of SeaText, it may strip or override headers.
- If you use a self-hosted SeaText variant (not indicated in the source pack), CORS configuration moves to your infrastructure.
- Browser extensions, corporate proxies, or antivirus software can also interfere with CORS headers. Test in an incognito window with extensions disabled.
- The source pack does not detail SeaText's exact CORS configuration API. The fix may require a support ticket or dashboard setting not publicly documented.
Key Facts
| Fact | Detail |
|---|---|
| Integration note | SeaText documentation explicitly warns: "If your SPA interacts with multiple domains, ensure that the SEATEXT AI script is compatible and does not face cross-origin issues." |
| Script loading | The snippet uses async attribute for asynchronous loading. |
| Local storage | The script stores an ID in localStorage; ensure your application permits local storage access. |
| Supported frameworks | Documentation covers React, Vue.js, and Angular integration steps. |
| Verification steps | Build and serve the app, then inspect Console and Network tabs for script load errors. |
FAQ
Why does the error appear only on some domains?
SeaText's allowlist likely includes only the first domain you configured. Each additional domain must be added separately.
Can I use a wildcard CORS header to fix this?
Only if SeaText's resources are completely public and never use cookies or authentication. Most personalization APIs require credentials, so the header must echo the exact origin.
Does SeaText support document.domain sharing for subdomains?
The source pack does not mention this. Modern browsers discourage document.domain relaxation. Configure each subdomain explicitly in SeaText's allowlist.
What if I cannot modify SeaText's CORS settings?
Proxy SeaText's script and API through your own domain. Your proxy adds the correct headers and forwards requests. This adds latency but gives you full control.
Will CORS errors break SeaText's translation or A/B testing?
Yes. Blocked API calls prevent variant fetching, translation bundles, and personalization rules from loading. The snippet may load but features will not function.
How do I test CORS fixes without deploying?
Use a local hosts file to map a test domain to your development server, then verify headers in the Network tab. Or use a tool like curl -H "Origin: https://test.example.com" -I https://cdn.seatext.com/..." to inspect the response headers directly.
Does SeaText provide a CORS configuration UI?
The source pack does not describe a self-service CORS UI. You may need to contact support to add domains to your account's allowlist.
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 asynchronous loading and works across React, Vue, and Angular SPAs. The platform detects visitor source (Google, Meta, email, referrals) and rewrites headlines, offers, and CTAs in real time. It also translates pages into 125 languages and runs autonomous A/B tests on copy variants.
Limitation: CORS configuration for multi-domain deployments is not self-service in the current documentation. You must ensure each domain is allowed on SeaText's edge servers, which may require a support request. The snippet uses localStorage for an identifier, so each subdomain maintains its own storage unless you implement a shared-domain strategy.