AngularJS: No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

At my client codes, I am using AngularJS $http to send a GET request to get some data from a back-end server. By default, the back-end sever doesn't put 'Access-Control-Allow-Origin' in the response header.

when I sent this request with Chrome, I got an error:

No 'Access-Control-Allow-Origin' header is present on the requested resource

Both web server and back-end server are running on a same machine with different port numbers.

It worked fine when I installed a Chrome plugin to enable cross-origin resource sharing. However, I would like to make it work by only changing my AngularJS client codes, without changing the web bower's setting and the back-end server's codes. Is it possible to do this?

Thanks

Answer 1

You need to add this at start of your php page

<?php header('Access-Control-Allow-Origin: *'); ?>

For .NET server can configure this in web.config as below

<system.webServer>
   <httpProtocol>
     <customHeaders>
       <add name="Access-Control-Allow-Origin" value="http://www.makemypublication.com" />
     </customHeaders>
  </httpProtocol>
 <system.webServer>

Or, you need to do something different when you want to do a cross-domain request. A tutorial about how to achieve that is Using CORS .

When you are using postman they are not restricted by this policy. Quoted from Cross-Origin XMLHttpRequest :

Regular web pages can use the XMLHttpRequest object to send and receive data from remote servers, but they're limited by the same origin policy. Extensions aren't so limited. An extension can talk to remote servers outside of its origin, as long as it first requests cross-origin permissions.