CORS error only occuring when url is prefixed with www

Question

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.com/index" everything works fine and all resources are loaded correctly. however when i try to visit my website using the url "http://www.example.com/index" i get the error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://example.com/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.com/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

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, Mar 19 '18 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, Mar 19 '18 at 13:15

score 6 · Accepted Answer · answered Mar 19 '18 at 13:22

example.com and www.example.com are different origins. To be the same origin the URL scheme, hostname, and port must be the same. www.example.com and example.com 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.com and www.example.com 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 recommend the first of those options.

My problem was **example.com and www.example.com are different origins**. Anyone facing same problem can solve this problem by forcing www using this article https://www.a2hosting.com/kb/developer-corner/apache-web-server/adding-or-removing-the-www-prefix-in-domain-urls — Inaam ur Rehman, Apr 15 '19 at 22:24

Remy · Answer 2 · 2018-03-19T13:18:26.387

0

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.com/XML/someXMLfile.xml", true); instead of a relative path ../XML/someXMLfile.xml, I am not yet clear as to why "www.example.com" and "example.com" are handled as different domains, but this solved the issue for me.

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

edited Mar 19 '18 at 13:18

answered Mar 19 '18 at 13:12

Remy

4,843
5
30
60

It's because they are different subdomains. https://stackoverflow.com/questions/14003332/access-control-allow-origin-wildcard-subdomains-ports-and-protocols – Daniel Gale Mar 19 '18 at 13:14

CORS error only occuring when url is prefixed with www

2 Answers2

Linked