You have set up sub-domains for your translated website.
For our example, let's say your website is on this URL: https://www.website.com/, and you have added Spanish version on https://es.website.com/.
Your Spanish website loads in the browser, but sometimes your website code might not work nicely with this new sub-domain.
Follow these steps to make sure it does:
Set the document domain
Use this script to tell your browser what is your root domain:
<script>
document.domain = "website.com"
</script>
Make sure to use the real root domain without any sub-domains
This avoids security checks when a window or frame from one sub-domain tries to communicate with a different sub-domain
Set the cookie domain
Cookies are the browser way of storing your session data. We would want all translated language to share the same session, and not have separate sessions. To do this we can tell the browser that our cookie is shared by all sub-domains. To do that add the "domain" property to your Cookie configuration. The value of the "domain" property needs to be the root domain with the "." prefix. For example: "domain=.website.com"
The implementation for this is usually very easy but it varies between servers. Ask your developer how to implement this on your own server.
Cross Origin Headers (CORS)
When your code sends XHR (ajax) requests from one sub-domain to another this might be blocked by the browser due to Cross-Origin security.
To avoid this, add these headers to your server configuration.
Here's an example code for Apache .htaccess file that allows the requests for all sub-domains of website.com:
SetEnvIf Origin "http(s)?://(.+\.)?(website.com)$" CORS=$0
Header set Access-Control-Allow-Origin "%{CORS}e" env=CORS
Header set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
Header set Access-Control-Allow-Headers "cache-control, content-type, accept, cookie, content-length, accept-encoding,accept-language, referer, user-agent, connection,x-http-method-override,x-requested-with"
Header set Access-Control-Allow-Credentials "true"
Header merge Vary "Origin"
Also add the "withCredentials" flag to your XHR requests.
Native JS example:
var xhr = new XMLHttpRequest();
xhr.withCredentials = true;
jQuery example:
$.ajaxSetup({
xhrFields: {
withCredentials: true
},
});