I am currently having an issue regarding CORS (Cross-origin resource sharing) the odd thing being this only seems to happen when i prefix my url using www.

For example when i go to my website using the url: "" everything works fine and all resources are loaded correctly. however when i try to visit my website using the url "" i get the error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at . (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

The resource i am trying to load is an XML file using the following code:

function loadXML()
{
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            xmlData = xhttp.responseXML;
            initStartShot();
        }
    };
    xhttp.open("GET", ".xml", true);
    xhttp.send();
}

I am currently having an issue regarding CORS (Cross-origin resource sharing) the odd thing being this only seems to happen when i prefix my url using www.

For example when i go to my website using the url: "http://example./index" everything works fine and all resources are loaded correctly. however when i try to visit my website using the url "http://www.example./index" i get the error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://example./index. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

The resource i am trying to load is an XML file using the following code:

function loadXML()
{
    var xhttp = new XMLHttpRequest();
    xhttp.onreadystatechange = function() {
        if (this.readyState == 4 && this.status == 200) {
            xmlData = xhttp.responseXML;
            initStartShot();
        }
    };
    xhttp.open("GET", "http://example./XML/someXMLfile.xml", true);
    xhttp.send();
}

all my resource files are on the same domain as my page.

i have looked around SO for issues related to mine, but most are about CORS in general, and how to get it to work. but seeing the fact i'm not having any CORS issues without "www" prefixed this doesn't seem applicable to my issue.

Unfortunately I am unable to share the url itself, but if you require any other information i'll do my best to provide it.

Any help would be greatly appreciated.

~Remy

• javascript
• web
• cors
• xmlhttprequest

• Is there a reason you need to use www or are you just curious about this issue? When you navigate to the site is it with or without the www? You could use something like javascript location.hostname to get the site URL and use that in subsequent parts of the page. – Daniel Gale Commented Mar 19, 2018 at 13:09
• While i was testing on desktop i navigated to the site without using www, but when testing on mobile the mobile browser auto-prefixed the url with www giving me the cors error. I have now added an answer where i use a relative path. I will add your solution using location.hostname aswell. thanks for the feedback! – Remy Commented Mar 19, 2018 at 13:15

2 Answers 2

example. and www.example. are different origins. To be the same origin the URL scheme, hostname, and port must be the same. www.example. and example. are not the same hostname.

By default it is allowed for JavaScript to access data from the same origin.

You get the error about the missing CORS permissions because you are trying to access one origin from the other.

There are several ways you can resolve this.

• Don't use multiple origins in the first place. Pick one of example. and www.example. to be canonical. Configure your HTTP server to issue 301 redirects from the non-canonical one to the canonical one.
• Use relative URLs. Your absolute URL means that when you are on the wrong origin, it still tries to access the other one. Using a relative URL will keep the request going to the same origin as the page.
• Configure your server to grant permission to the other origin with CORS headers.

I remend the first of those options.

While reviewing my SO post i actually found the issue, so for future reference i will be answering my own question:

In my XML downloader i used a static path xhttp.open("GET", "http://example./XML/someXMLfile.xml", true); instead of a relative path ../XML/someXMLfile.xml, I am not yet clear as to why "www.example." and "example." are handled as different domains, but this solved the issue for me.

EDIT: as per @Daniel_Gale his ment, using location.hostname will also work.