Take photo of a system using xampp and javascript cors

Good morning.
I need to access the url of a photo in my application, and I need to use http authentication using cors and xampp (where I can not configure), and AJAX because it's going to be an ionic app that will take this photo. >

I tried setting up xampp this way in the httpd-vhosts file:

<VirtualHost *:80>
    DocumentRoot "C:\xampp\htdocs\portal\public"
    ServerName auth.portal.dev

    <Directory "C:/xampp/htdocs/portal/public/upload/img/pessoa/">
        AllowOverride All

        Header set Access-Control-Allow-Origin "*"                  
        Header set Access-Control-Allow-Methods "POST, GET, OPTIONS"
        Header set Access-Control-Allow-Headers "X-Access-Token, X-Key, Origin, X-Requested-With, Content-Type, Accept"



        AuthType Basic
        AuthName "Restricted Files"
        AuthBasicProvider file
        AuthUserFile "C:/xampp/apache/passwords/bioacessopsw"
        Require user bioacesso
    </Directory>    
 </VirtualHost>

I'm using AJAX for authentication and testing:

var semauth = 'http://portal.dev/upload/img/pessoa/11.jpeg';
var comauth = 'http://auth.portal.dev/upload/img/pessoa/11.jpeg';

var token = 'bioacesso:bioacesso@uzer';

var xhr = new XMLHttpRequest();
xhr.open("GET", comauth, true);
xhr.withCredentials = true;
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
xhr.setRequestHeader("Authorization", 'Basic ' + btoa(token));
xhr.onload = function () {
    console.log(xhr.responseText);
};
xhr.send();

In the browser terminal is giving this message:
Cross-origin request blocked: Same Origin Policy prevents the remote resource from reading at link . (Reason: CORS 'Access-Control-Allow-Origin' header is not present.)