Why doesn't cross domain request work?

Question

JavaScript

Good day to all, I'm trying to make a cross domain request, I'm
testing in Firefox Quantum

$.ajax({
                url: url,
                xhrFields: {
                    withCredentials: true
                },
                success: function(data) {
                    data = JSON.parse(data);
                    console.log(data);
                    if (data.length == 0) {
                        console.log('Came an empty array');
                        $("detailing").html(' <div class="row"><div class="col-sm-12"><center><h3>Нет детализации</h3></center></div></div>');
                    }
                }
            });

making a GET request to a domain

Host: parser.test1.isan.pro
User-Agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:64.0) Gecko/20100101 Firefox/64.0
Accept: */*
Accept-Language: en-US,en;q=0.5
Accept-Encoding: gzip, deflate
Referer: http://localhost/index.php/admin/phones
Origin: http://localhost
DNT: 1
Connection: keep-alive

I get a response:

HTTP/1.1 200 OK
Date: Fri, 14 Dec 2018 06:06:15 GMT
Server: Apache/2.4.18 (Ubuntu)
Cache-Control: no-cache, private
Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, OPTIONS, HEAD
X-Debug-Token: 78a6a1
X-Debug-Token-Link: http://example.pro/index.php/_profiler/78a6a1
Content-Length: 2
Keep-Alive: timeout=5, max=100
Connection: Keep-Alive
Content-Type: application/json

Despite the headings

Access-Control-Allow-Origin: *
Access-Control-Allow-Methods: GET, OPTIONS, HEAD

And the answer comes (the body of the response can be read there normal json )
In the js console it still displays a message

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at example.pro/index.php/api/phone?number=96176214270 . (Reason: CORS header 'Access-Control-Allow-Origin' does not match '*').[More]

And the script crashes... Why is it happening how to win it? headers are not treated and I do not know what to do.
What are some ideas?

Answer 1

you have the option withCredentials: true - which tells the browser that you want to send cookies to a third party resource. In this regard, a stricter CORS policy:
1. the response header Access-Control-Allow-Origin cannot be a wildcard (*), the server must respond with the exact origin
2. the response header Access-Control-Allow-Credentials: true must be present
on the total server should respond with the following headers:
Access-Control-Allow-Origin: {request.headers.Origin}
Access-Control-Allow-Methods: GET, OPTIONS, HEAD
Access-Control-Allow-Credentials: true
where {request.headers.Origin} - Origin header from the request

Answer 2

Google Chrome?
he has problems, for example, with loading Ajax from a local file
, you need to cut down some fad in deep settings

Answer 3

put it in the handler at the very beginning header('Access-Control-Allow-Origin: *');
and send jsonp
helped me