localhost is therefore not allowed access

Question

To solve CORS issue, I wrote there

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: GET, POST');
header("Access-Control-Allow-Headers: X-Requested-With"); 

in my server site

but during my development I'm seeing this error

The 'Access-Control-Allow-Origin' header contains multiple values '*, *', but only one is allowed. Origin 'http://localhost' is therefore not allowed access.

I thought allow-origin: * will solve everything? But why it says header contain multiple values?

Answer 1

This is a common problem when accidently enabling CORS twice. Check to make sure you did not enable it in apache, or that the header is not being set twice. As a sanity check you can try to remove the header and add it right back before you serve out your response.

Ex:

header_remove('Access-Control-Allow-Origin');
header('Access-Control-Allow-Origin: *');

Answer 2

Due to browser security restrictions, most Ajax requests are subject to the same origin policy; the request can not successfully retrieve data from a different domain, subdomain, port, or protocol. But Script and JSONP requests are not subject to the same origin policy restrictions.

If you have n't used JSONP yet. The Wikipedia Says

JSONP or “JSON with padding” is a complement to the base JSON data format, a usage pattern that allows a page to request and more meaningfully use JSON from a server other than the primary server.

So your ajax call should be like this :

$.ajax({
        type: 'GET',
        crossOrigin: true,
        dataType: "jsonp",
        url: url,
        success: function(data) {
            console.log(data);
        }
    });

Answer 3

Using * will not work. The below PHP code will accept all requests from all domains and works in IE, Firefox, Chrome and Safari.

$origin=isset($_SERVER['HTTP_ORIGIN'])?$_SERVER['HTTP_ORIGIN']:$_SERVER['HTTP_HOST'];
header('Access-Control-Allow-Origin: '.$origin);        
header('Access-Control-Allow-Methods: POST, OPTIONS, GET, PUT');
header('Access-Control-Allow-Credentials: true');
header('Access-Control-Allow-Headers: Authorization, X-Requested-With');
header('P3P: CP="NON DSP LAW CUR ADM DEV TAI PSA PSD HIS OUR DEL IND UNI PUR COM NAV INT DEM CNT STA POL HEA PRE LOC IVD SAM IVA OTC"');
header('Access-Control-Max-Age: 1');

Accepting requests from all domains is insecure. For a better (but slightly more complex) solution, see here: CORS That Works In IE, Firefox, Chrome And Safari