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 :)

Solution 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.

Solution 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

Comments

[Quentin]

The code shows that the OP already knows that they need to enable CORS (they are just doing it wrong). The code also shows that they aren't using Apache, although they might be using express. Either way, you should avoid link-only answers on Stackoverflow.

[Cute Bear]

so what's the solution?

[Quentin]

To send an appropriate Access-Control-Allow-Origin header.