XMLHttpRequest cannot load. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin is therefore not allowed access

Question

I am using apache httpd server for hosting client side files

http://ipaddress:8010/

and my Nodejs server is running on http://ipaddress:8087

when i am sending post request then it shows following error

XMLHttpRequest cannot load http://ipaddress:8010/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://ipaddress:8087' is therefore not allowed access.

my client side code is :

    $.ajax({
  type: "POST",

  url: "http://ipaddress:8010",
  data: {name:"xyz"},
  success: function(){
  alert("success");
  },
  dataType: "json"
});

my server side is:

response.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');


    response.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');


    response.setHeader('Access-Control-Allow-Credentials', true);

options allowed still it is not working can anybody suggest what exactly is the problem? i am receiving request on server side but not able to send any response.

thanks in advance :)

Answer 1

The error message says:

No 'Access-Control-Allow-Origin' header

You have set three Access-Control-Allow-SOMETHING headers, but none of them is Origin.

Answer 2

You will need to enable CORS.

To add CORS headers in apache add the following line inside either the <Directory>, <Location>, <Files> or <VirtualHost> section of server config file or within a .htaccess file:

Header set Access-Control-Allow-Origin "*"

refer to this link for apache

http://enable-cors.org/server_apache.html

For express you can add middleware that will set required headers for response

app.use(function (req, res, next) {
  res.header("Access-Control-Allow-Origin", "*");
  res.header("Access-Control-Allow-Headers", "X-Requested-With");
  next();      
}); 

http://enable-cors.org/server_expressjs.html