Accessing localhost with machine IP results in failing Ajax calls

Ajax GET call in Angular is failing.

It raises the following error:

XMLHttpRequest cannot load http://localhost:3000/learning_record_service/get_document?document_id=288. Origin http://127.0.0.1:3000 is not allowed by Access-Control-Allow-Origin. 

And here are the request details:

Request URL:http://localhost:3000/learning_record_service/get_document?document_id=288
Request Method:OPTIONS
Status Code:200 OK
Request Headersview source
Accept:*/*
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Access-Control-Request-Headers:accept, origin, x-requested-with
Access-Control-Request-Method:GET
Connection:keep-alive
Host:localhost:3000
Origin:http://127.0.0.1:3000
Referer:http://127.0.0.1:3000/documents/open/288?sc=c961d72844bbc5439923e097860057d0&angular=1
User-Agent:Mozilla/5.0 (Macintosh; Intel Mac OS X 10_7_5) AppleWebKit/537.22 (

While here is the code:

$http.get('/learning_record_service/get_document?document_id=' + document_id).success(function(data){

//success code

});

Looking at your request we can see the following:

Request URL:http://localhost:3000/learning_record_service/get_document?document_id=288
...
Host:localhost:3000
Origin:http://127.0.0.1:3000
Referer:http://127.0.0.1:3000/documents/open/288?sc=c961d72844bbc5439923e097860057d0&angular=1

As you can see something is causing your code to mix up localhost:3000 and 127.0.0.1:3000. This is interpreted as a 'cross-origin' or 'cross-domain' request which is not allowed by most browsers by default.