2

I am facing a problem in sending cross domain request to a web api(api.worldbank.org) . It says

No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1' is therefore not allowed access.

So as someone suggested, i used this- 

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

but still the error is same and also no change occurs in headers with or without adding this code.

Complete code is this- 

'use strict';
    var app=angular.module('myapp',[]);
    app.config( function($httpProvider) {
        $httpProvider.defaults.useXDomain = true;
            delete $httpProvider.defaults.headers.common['X-Requested-With'];
        }
    );
app.factory('dataFactory',function($http){
        var O={};
        O.getLifeExpectancy=function(){
            var dataToSend={};
            $http({
                method:'GET',
                url:'http://api.worldbank.org/countries/in/indicators/SP.DYN.LE00.IN?format=json&date=2000:2015'

            }).then(function(data){
                dataToSend=data;
            });
            return dataToSend;
        };

Am i doing something wrong ? is $http and $httpProvider two different things, because no change is reflected in headers with or without app.config code.

here are my headers in both the situations-

Accept:application/json, text/plain, / Accept-Encoding:gzip, deflate, sdch Accept-Language:en-US,en;q=0.8 Cache-Control:max-age=0 Connection:keep-alive Host:api.worldbank.org Origin:127.0.0.1 Referer:127.0.0.1/myApp/ User-Agent:Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/51.0.2704.106 Safari/537.36

Daga Arihant
  • 464
  • 4
  • 19
  • which browser you are using? – mujuonly Jul 27 '16 at 06:35
  • Thank you, I am using chrome, and using a chrome extension for cors i am able to achieve what i want to do, but since everyone who is going to use my app can't install the chrome extension, so i was looking for an angular work around. and thats the reason i added $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; in app.config. but it is not changing any header of my request. headers remains same with or without adding these lines of code. – Daga Arihant Jul 28 '16 at 15:19
  • http://stackoverflow.com/questions/29915657/solved-enable-cors-angularjs-to-send-http-post-request http://stackoverflow.com/questions/23823010/how-to-enable-cors-in-angularjs checked these solution? – mujuonly Jul 28 '16 at 15:39

1 Answers1

1

This messages says that your server-side code doesn't allow request from different domain, so the best solution is to enable CORS with header Access-Control-Allow-Origin: '*' at the server-side.

EDIT: If your Angular app will run in browser - you need to set CORS server-side or just make some proxy on your domain (some browsers on default block such requests).

But if you're doing Cordova/PhoneGap mobile app you'll be able to disable it in config.xml so currently for testing purposes you can just disable it in your browser.

Bartek Cichocki
  • 660
  • 7
  • 10
  • Thank you, I am using chrome, and using a chrome extension for cors i am able to achieve what i want to do, but since everyone who is going to use my app can't install the chrome extension, so i was looking for an angular work around. and thats the reason i added $httpProvider.defaults.useXDomain = true; delete $httpProvider.defaults.headers.common['X-Requested-With']; in app.config. but it is not changing any header of my request. headers remains same with or without adding these lines of code. – Daga Arihant Jul 28 '16 at 15:21
  • The only way to make it working is enabling CORS at the server. If you can't do that, you need to create your own proxy on your own server - so you make request to the your server and the server makes request to worldbank.org. – Bartek Cichocki Jul 28 '16 at 18:39