Javascript AJAX and Cross Origin Request Policy

Hi all, first post here...

I am playing with Content Security Policies and some other stuff trying to figure out how to add a bit if security for users. Ive created about a dozen pages, all nicely and neatly working together so far. All garbage test stuff, but its not working as I have hoped.

One of the functions I need to work is to use AJAX to load data from a PHP script including a cookie with an HttpOnly flag set, so Javascript cant read it.

Trouble is that no matter what I try short of turning off ALL security (which aint gonna happen), I can not get my AJAX call to not violate Cross Origin Request Policy. What is throwing me off is that I dont believe it should be Cross Origin at all! I know one way to do it is to process the "Origin" header when sending the request but its never actually sent! Typically it is not, except for when "withCredentials" flag is also set, which it is. If thats what I gotta do, fine, but I cant get it to work. Better solution is make sure it is NOT treated as Cross Origin, and I believe that would also resolve it. Both my solutions are evading me!

The script is in "iframe.php"

So here is my test page on my test server: (self signed SSL)
h ttps://www.webucate.me/cors_csp/

Full source is here:
h ttps://www.webucate.me/cors_csp/ajax.zip

This is where it fails on me. This AJAX call wont send the cookie. I am not sure if this is where I need to fix it however...

const loadLocalXMLCookie = function(){
  // This isnt working, I get a CORS Violation
  let url = "jsondata.php";
  var xhttp = new XMLHttpRequest();
  // Third Argument of "true" allows XLMHttpRequest2 which allows sending Cookies via AJAX
  xhttp.open("GET", url, true);
  // withCredentials should send Cookies via the request, and should not be needed on SameSite
  xhttp.withCredentials = true;       
  xhttp.onreadystatechange = function() {
    console.log(this);
    if (this.readyState == 4 && this.status == 200){
      outputElement.innerHTML = this.responseText;
    } 
  };
  xhttp.onerror = function(){ outputElement.innerHTML = "XML Cookie Error " + url; };
  xhttp.send();       
}

Code (JavaScript):

What can I do so that this XMLHttpRequest object is not treating the request as Cross Origin, thus, use PHP to read and set the cookie? If I have to use Cross Origin, what am I missing in my setup?

 

Seriously? No one?

This site sucks. I will go elsewhere.

 

Important concerning a CORS error is what server response you have in the "Access-Control-Allow-Origin" header.
Why should the response be blocked when it's the same server?