I'm trying to get an AJAX request working between my browser and an Apache server(residing in a different domain) using CORS.

At the server side, I've made the following changes in the httpd.conf section of the server as per the responses in "Header set Access-Control-Allow-Origin in .htaccess doesn't work":

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

My AJAX call is of the form:

        $.ajax({
            url        :'https://x.x.x.x/validateCustomerID',
            type       : 'POST',
            cache    : false,
            crossDomain: true,
            contentType: 'application/json',
            beforeSend: function(xhr){
                    xhr.setRequestHeader("Access-Control-Allow-Methods","POST");
                    xhr.setRequestHeader("Access-Control-Allow-Headers","X-Requested-With");
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            },
            data       : {loginId : '12345'},
            success    : function(response){console.log("Success"+JSON.stringify(response))},
            error      : function(response){console.log("Error"+JSON.stringify(response))}
        });
    }

I've also tried menting out the beforeSend() in order to avoid a preflight request but it wasn't successful either.

The error messages that I receive on Chrome and Firefox are:

• In Chrome:

"XMLHttpRequest cannot load https://x.x.x.x/validateCustomerID. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403."

• In Firefox:

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://x.x.x.x/validateCustomerID. (Reason: CORS request failed)."

There are no response headers received from the server in my browser which I think are mandatory for CORS to work and also logs in the server shows no request reaching it from my browser.

I would really appreciate if someone here can help me resolve this issue as I'm stuck here for quite a few days now and have used almost all hit and trial methods to make this thing work.

I'm trying to get an AJAX request working between my browser and an Apache server(residing in a different domain) using CORS.

At the server side, I've made the following changes in the httpd.conf section of the server as per the responses in "Header set Access-Control-Allow-Origin in .htaccess doesn't work":

Header add Access-Control-Allow-Origin "*"
Header add Access-Control-Allow-Headers "origin, x-requested-with, content-type"
Header add Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

My AJAX call is of the form:

        $.ajax({
            url        :'https://x.x.x.x/validateCustomerID',
            type       : 'POST',
            cache    : false,
            crossDomain: true,
            contentType: 'application/json',
            beforeSend: function(xhr){
                    xhr.setRequestHeader("Access-Control-Allow-Methods","POST");
                    xhr.setRequestHeader("Access-Control-Allow-Headers","X-Requested-With");
                    xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            },
            data       : {loginId : '12345'},
            success    : function(response){console.log("Success"+JSON.stringify(response))},
            error      : function(response){console.log("Error"+JSON.stringify(response))}
        });
    }

I've also tried menting out the beforeSend() in order to avoid a preflight request but it wasn't successful either.

The error messages that I receive on Chrome and Firefox are:

• In Chrome:

"XMLHttpRequest cannot load https://x.x.x.x/validateCustomerID. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access. The response had HTTP status code 403."

• In Firefox:

"Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://x.x.x.x/validateCustomerID. (Reason: CORS request failed)."

There are no response headers received from the server in my browser which I think are mandatory for CORS to work and also logs in the server shows no request reaching it from my browser.

I would really appreciate if someone here can help me resolve this issue as I'm stuck here for quite a few days now and have used almost all hit and trial methods to make this thing work.

• javascript
• ajax
• apache
• google-chrome
• cors

Share Improve this question Follow edited May 23, 2017 at 12:08 CommunityBot 111 silver badge asked Oct 16, 2015 at 10:26 Yash KapilaYash Kapila 27111 gold badge77 silver badges1717 bronze badges 9

• Did you activate the apache module headers a2enmod headers? – Jacob Lauritzen Commented Oct 16, 2015 at 10:32
• Why are you trying to set Access-Control headers in the request? – Quentin Commented Oct 16, 2015 at 10:33
• @Jacob, I tried activating apache module headers using a2enmod headers mand but it gave me an error that it was an invalid mand. I then read somewhere that Mod_headers is enabled by default in Apache so I left it as it is. Could that be a problem? – Yash Kapila Commented Oct 16, 2015 at 10:39
• @Quentin: I read it somewhere where it was suggested to try set the headers in the request itself so I gave it a try. Like I've mentioned in my question itself, I've been stuck at this for a few days now and have been trying out any suggestion that I could find. But then I've also tried removing the request headers and it still won't work. Any suggestions? – Yash Kapila Commented Oct 16, 2015 at 10:42
• 2 in order to avoid a preflight request - you've guaranteed a preflight by setting the content type to application/json ... if the preflight is killing you, now you know why – Jaromanda X Commented Oct 16, 2015 at 10:59

 |  Show 4 more ments

1 Answer 1

Sorted by: Reset to default 2

This is my setup in site.conf that works in production now with apache2

Header set Access-Control-Allow-Origin "*"
Header set Access-Control-Allow-Headers "authorization, origin, user-token, x-requested-with, content-type"
Header set Access-Control-Allow-Methods "PUT, GET, POST, DELETE, OPTIONS"

for a future reference I strongly suggest to bookmark this site http://enable-cors/index.html