Angularjs http.get() Cross-Origin request is getting blocked

Question

$http({
    method: 'GET',
    url: $scope.geoURL,
}).success( function(response) {
    window.alert("3.");
    $scope.resp = response;
    window.alert("3."+response.status);
}).error(function (){
    window.alert("-3");
});

Causes the following problem:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://175.107.196.142/search/getPlaceInfoForLocation_v0.0.php?lat=33.541404&lng=73.146358. (Reason: CORS header 'Access-Control-Allow-Origin' missing).

This is not a problem with the browser, same url is being called perfectly when directly called from the browser.

search for CORS (Cross-Origin Resource Sharing) - e.g.. https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS — racraman, May 14 '16 at 08:32

score 0 · Answer 1 · answered May 14 '16 at 08:46

0

If you can control the API service, add the following HTTP header:

Access-Control-Allow-Origin: *

See also http://enable-cors.org/

If you can't control the API service, you can setup a proxy that stands in the middle between your browser and the API service. E.g. using NPM package https://www.npmjs.com/package/cors-anywhere

answered May 14 '16 at 08:46

Dirk

2,167
2
20
29

Thank you @Dirk, i used $http.jsonp call and which resolved my issue. – Ahsan Moavia May 17 '16 at 09:42

score 0 · Accepted Answer · answered May 14 '16 at 08:47

All you need to do this is to allow the origin you are requesting from, or allow all. Add this to your API. Your API needs to send this header back along with response.

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

You however have some other choices as well.

Best: CORS header (requires server changes)
Proxy Server
JSONP (requires server support)

https://daveceddia.com/access-control-allow-origin-cors-errors-in-angular/

Angularjs http.get() Cross-Origin request is getting blocked

2 Answers2