jQuery not able access both 'http://' and 'http://www.' on .load()

Question

I am having an issue when trying to .load() my navigation with jQuery and using absolute URLs.

If I type my URL using this prefix: ' http://www . [ABSOLUTE URL HERE]' then my absolute URL in my jQuery must contain the exact same prefix. If I then type prefix my URL with 'http:// [ABSOLUTE URL HERE]' I get the following error:

XMLHttpRequest cannot load [ABSOLUTE URL HERE] /imports/layout/nav.html. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '[ABSOLUTE URL HERE]' is therefore not allowed access.

This also happens in the converse situation. if I alter the absolute URL path in my jQuery.

My code with absolute URL:

$(document).ready(function() {
  $('#nav').load(' [ABSOLUTE-URL-HERE] /imports/layout/nav.html');
});

I have since altered my code to use a relative URL like so:

$(document).ready(function() {
  $('#nav').load('../../imports/layout/nav.html');
});

This works without an issue. But for consistency I would like to use absolute URLs.

Why is this issue occurring? How do I resolve it?

Answer 1

It seems like you are creating a cross origin request. That you cannot access if server do not allows you.