0

I am trying to invoke a REST web service from my new Angular app. When a request is made I am getting this error:

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

I found out this is happening because the browser is not allowing such action.

In StackOverflow one of the solutions was to disable a few security options. I tried doing this and it didn't work, I was getting the same error.

Then another solution suggested moving the project to a server. So I moved my project to my www folder in WAMP. It didn't work because I needed to activate the headers_module and then modify httpd.conf adding this:

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin: *
</IfModule>

So I activated the module and modified the general config file (can't remember how to do it just form my web project) and restarted WAMP. It still won't work.

The only think I could do to make it work was creating a web project in Eclipse JEE and run it on a Tomcat server. But I don't really want to do this.

How can I fix this problem?

Edit I also tried adding this to my angular app:

app.config([ '$httpProvider', function($httpProvider) {
    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];
}]);

The issue remained.

Community
  • 1
  • 1
dabadaba
  • 9,064
  • 21
  • 85
  • 155
  • Hi, if you didn't do this yet. Try adding the below code in your angular app I hope the problem will get resolved. `your_app_name.config(['$httpProvider', function($httpProvider) { $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; }]);` – Achu Nov 29 '15 at 17:15
  • Yes, I forgot to mention I also tried that. Same problem. – dabadaba Nov 29 '15 at 17:20
  • May I know what is you are using as your back-end (server) ? – Achu Nov 29 '15 at 17:29
  • I mentioned I am using WAMP and modified apache modules and configuration, so... Apache, obviously. – dabadaba Nov 29 '15 at 17:36
  • You have to specify this headers in .htaccess or any where you can configure in the apache Access-Control-Allow-Methods: POST, PUT, DELETE, GET, OPTIONS Access-Control-Allow-Headers: X-Requested-With,ORIGIN, Content-type. – krish Nov 30 '15 at 03:30
  • Here is the .htaccess code : 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" – krish Nov 30 '15 at 03:31

1 Answers1

0

I encountered the same problem when developing my own web application. This is a CORS problem. What I did to get past it is called JSONP (JSON-Padding). This approach ignores CORS altogether. Luckily, angularjs $html service allows for the use of JSONP.

I will refer you to the following section of the angularjs documentation: https://docs.angularjs.org/api/ng/service/$http

An important concept for JSONP is a callback, which is essentially what you will be padding (the 'P' in JSONP) the JSON with. The callback is passed as a parameter in the http request.

Here is some example code, which I use in my web application

(My php layer that hides my developer key and calls a third party api):

$method = isset($_GET['method']) ? $_GET['method'] : '';

//Check for a callback, which is needed for JSONP
if(isset($_GET['callback'])){

    //Check which method is being called.
    //I use method to abstract out the long urls of api's
    if($method == 'get_data_a'){

        $url = 'https://some.api.url?api_key='.$key;
        $response = file_get_contents($url);

        //Pad the JSON response with a function named after the callback for JSONP
        //You're returning something that looks like
        //myCallbackName(myJSONString);
        echo $_GET['callback'] . '(' . $response . ')';

    }
    else if ($method == 'get_data_b'){
        ....
    }
}

(My application code - AngularJS)

//I reference my php layer for REST services ; callback=JSON_CALLBACK as per angularjs documentation
var url =  my_php_layer_url + '?method=get_data_a&callback=JSON_CALLBACK';

//Call webservice using angularjs $http and the shortcut method for JSONP
$http.jsonp(url)
    .success(function (result) {
        //do whatever you want with the result; the result is properly formatted JSON
    })
    .error(function (data, status) {
        //do whatever you want with the error
    });

Hope this helps you.

Chris Newman
  • 3,152
  • 1
  • 16
  • 17