Cross domain request using angularJS

Question

I would like to display data from API using angularJS. This code works fine when run code on same PC. But when I tried to test on another PC then it is displaying error no access-control-allow-origin' header is present on the requested resource. angularjs

I am using 1.4.8

Here is my code :

$http({
            method:"get",
            url: 'http://IP/Test_API/index.php/test123_api/empdtl_from_empid/emp_id/'+$scope.empId
        })
        .success( function( response ){
            if (response != null || response != 'undefined') {
                $scope.empNm = response.data.emp_name;
            }
        })
        .error( function( response ) {
            if(response.statusCode == 404)
            {
                $scope.errorEmpNm = "You May Inputted Wrong Employee Id which have not Exist, Please Enter Correct Employee Id...!!!";
            }
        })

The problem is not in the angular code, but in the server API, what language are you using? — Rafael Zeffa, Dec 10 '15 at 10:10
Seems duplicate http://stackoverflow.com/questions/18053547/angularjs-failed-to-load-resource-origin-null-is-not-allowed-by-access-control/18053622#18053622 — Jay Shukla, Dec 10 '15 at 10:11
maybe its help you: http://stackoverflow.com/questions/11599573/access-control-allow-origin-is-not-showing-up-in-response-headers-from-codeignit — Rafael Zeffa, Dec 10 '15 at 10:15
Possible duplicate of [AngularJS: No "Access-Control-Allow-Origin" header is present on the requested resource](http://stackoverflow.com/questions/29547003/angularjs-no-access-control-allow-origin-header-is-present-on-the-requested-r) — ngLover, Dec 10 '15 at 10:15

score 3 · Answer 1 · answered Dec 10 '15 at 10:17

3

You can't solve it through javascript. The server you are making the request to has to implement CORS to grant JavaScript from your website access. Your JavaScript can't grant itself permission to access another website.

answered Dec 10 '15 at 10:17

ngLover

4,439
3
20
42

Aetherus · Answer 2 · 2015-12-10T10:32:09.927

3

You can try $http.jsonp(), it can make cross-origin requests, but the only option of request method is GET, and you can't use it to carry large payload because the browser may restrict URL length.

Example

Pay attention to the callback=JSON_CALLBACK in the url!

var url = "http://other.domain.com/some/path?callback=JSON_CALLBACK";
$http.jsonp(url, {params: {param1: value1, param2: value2}})
     .success(function(response) {
       // ...
     })
     .error(function(response) {
       // ...
     })

edited Dec 10 '15 at 10:32

answered Dec 10 '15 at 10:23

Aetherus

8,720
1
22
36

I have tried Jsonp but it is not working for me can you please provide me example ? – Hkachhia Dec 10 '15 at 10:24
@Hkachhia Example provided. – Aetherus Dec 10 '15 at 10:38
@Thanks: Is it use same syntax for post data ? – Hkachhia Dec 10 '15 at 10:56
@Hkachhia As I said, you can't use jsonp to send POST requests, or any kind of requests other than **GET**. – Aetherus Dec 10 '15 at 11:00
Oh sorry. But how to POST data in cross domain ? you know that then help me – Hkachhia Dec 10 '15 at 11:18

score 1 · Answer 3 · answered Dec 10 '15 at 10:13

You have to enable CORS on your response. A workaround is to use the enable CORS plugin for Chrome However, be aware that this is not a solution for real customers and it will have side effects on your browser. Only use it for testing.

The real fix is something that you have to do on the server side. The way of enabling Allow-Control-Allow-Origin on your backend depends on the architecture of your backend. Add 'Allow-Control-Allow-Origin' to the header of your response and the problem will be fixed.

For PHP add the following to your response header

header("Access-Control-Allow-Origin: *");

Cross domain request using angularJS

3 Answers3

Example

Linked