CORS error only occuring when url is prefixed with www

问题

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

回答1:

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.

回答2:

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.

来源：https://stackoverflow.com/questions/49363749/cors-error-only-occuring-when-url-is-prefixed-with-www

标签

javascript

web

cors

xmlhttprequest