I am trying to get an AJAX request running between my browser and Apache server (located in a different domain) using CORS.
On the server side, I made the following changes in the httpd.conf section of the server according to the answers in the Header set Access-Control-Allow-Origin section in .htaccess does not 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 has the form:
$.ajax({ url :'https://xxxx/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 also tried commenting out the beforeSend () method to avoid the pre-flight protection request, but it was also not successful.
The error messages I get in Chrome and Firefox are as follows:
"XMLHttpRequest cannot load https: // xxxx / validateCustomerID . There is no" Access-Control-Allow-Origin "header on the requested resource. Therefore," null "does not have permission. The response had an HTTP status code 403."
"Cross-query request blocked: a policy of the same origin prohibits reading the remote resource at https: // xxxx / validateCustomerID . (Reason: CORS request failed)."
My browser does not have response headers, which, it seems to me, are mandatory for CORS, and the server logs do not show the request received from my browser.
I would really appreciate if someone here helps me solve this problem, since I’ve been stuck here for quite a few days and used almost all the hit methods and trial versions to make this work.