I am learning angularJS and trying to implement it in my application. I have an RESTful WCF service hosted on localhost IIS. It has a GET method defined to fetch a list of documents : http://localhost:70/DocumentRESTService.svc/GetDocuments/ Now I am trying to consume this service in my angular app and display the data . Following is the code : HTML : <pre class="prettyprint"><code><html> <script src="../../dist/js/angular/angular.min.js"></script> <script src="../../assets/js/one.js"></script> <body ng-app="myoneapp" ng-controller="oneAppCtrl"> {{"Hello" + "AngularJS"}} <hr> <h1> Response from my REST Service </h1> {{hashValue}} <hr> <h1> Response from w3school REST Service </h1> {{names}} </body> </html> </code></pre> JS: <pre class="prettyprint"><code>angular.module('myoneapp', []) .controller('oneAppCtrl', function($scope,$http){ $scope.documentValue = {}; $http({method: 'GET', url: 'http://localhost:70/DocumentRESTService.svc/GetDocuments/', headers: { // 'Access-Control-Allow-Origin': 'http://localhost' } }) .success(function(data){ alert('Success!'); $scope.documentValue=data;}) .error(function(data){ alert('Error!'); $scope.documentValue=data; alert('Error!' + $scope.documentValue);}) .catch(function(data){ alert('Catch!'); $scope.documentValue= data;}); $http.get("http://www.w3schools.com/angular/customers.php") .success(function(response) {$scope.names = response.records;}); }); </code></pre> The strange behavior is this code works perfectly fine in IE11 , whereas it doesn't run in Chrome/Firefox. Following is the response in the chrome:(for my REST service) , whereas the REST service from w3schools worked just fine. <blockquote> {"data":null,"status":0,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://localhost:70/DocumentRESTService.svc/GetDocuments/","headers":{"Accept":"application/json, text/plain, /"}},"statusText":""} </blockquote> Console displayed following error message. <ul> <li>[Chrome Console:By opening from filesystem] </li> </ul> XMLHttpRequest cannot load http://localhost:70/DocumentRESTService.svc/GetDocuments/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'file://' is therefore not allowed access. <ul> <li>[Chrome Console:hosted using Brackets]</li> </ul> XMLHttpRequest cannot load http://localhost:70/DocumentRESTService.svc/GetDocuments/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:55969' is therefore not allowed access. <ul> <li>[Firefox Console:]</li> </ul> Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:70/DocumentRESTService.svc/GetDocuments/. This can be fixed by moving the resource to the same domain or enabling CORS. The question here are few: <ol> <li>Why is localhost or my machineName considered to be a cross-domain request ? I am in the same domain , ain't I ?</li> <li>Are there any changes required to do at my service end to enable this behavior? If yes , where in WCF Service ?( based on something i read here )</li> <li>an JSONP be useful in this case ? If yes , how would i use it ? would it work with requests that need custom headers ?( NOt really sure what it is , but while resarching found a lot of answers mentioning this. reading links will be helpful. )</li> </ol> Any help or direction will be helpful. P.S: <ul> <li>IDE:Brackets , if that matters .</li> <li>AngularJS v1.4.3</li> <li>I have referred various stackoverflow questions referring similar problem (CORS) , which involved $resource , $provider , $config , Also some related to deleting some header and adding some value one of the header. I am bit naive to this - any references to this will be helpful.</li> </ul>

I struggled for way too long with CORS issues caused by the interaction of an emulated Ionic project (running locally) with some small Node.JS web services (also running locally). Behold the short easy workaround : Chrome's plugin AllowControlAllowOrigin. https://chrome.google.com/webstore/search/cross%20origin?utm_source=chrome-ntp-icon&_category=extensions Just switch the radio button from red to green, and no more blocked request, error or warning ! Of course it's a temporary solution and you may have to put your hands in your request headers when the time to stop the local tests will come. In the meantime, that's a great way to avoid loosing time on those anoying recurrent issues.

CORS issue on localhost while calling REST service from angularjs

I am learning angularJS and trying to implement it in my application.

I have an RESTful WCF service hosted on localhost IIS. It has a GET method defined to fetch a list of documents : http://localhost:70/DocumentRESTService.svc/GetDocuments/

Now I am trying to consume this service in my angular app and display the data . Following is the code : HTML :

<html>
    <script src="../../dist/js/angular/angular.min.js"></script>
    <script src="../../assets/js/one.js"></script>
    <body ng-app="myoneapp" ng-controller="oneAppCtrl">
                {{"Hello" + "AngularJS"}}
        <hr>
        <h1> Response from my REST Service </h1>
        {{hashValue}}

        <hr>
        <h1> Response from w3school REST Service </h1>
        {{names}}


    </body>
</html>

JS:

angular.module('myoneapp', [])
    .controller('oneAppCtrl', function($scope,$http){
        $scope.documentValue = {};

        $http({method: 'GET',
                url: 'http://localhost:70/DocumentRESTService.svc/GetDocuments/',
                headers:
                        {
//                          'Access-Control-Allow-Origin': 'http://localhost'
                        }                   
               })
            .success(function(data){ alert('Success!'); $scope.documentValue=data;})
            .error(function(data){ alert('Error!'); $scope.documentValue=data; alert('Error!' + $scope.documentValue);})
            .catch(function(data){ alert('Catch!'); $scope.documentValue= data;});

        $http.get("http://www.w3schools.com/angular/customers.php")
            .success(function(response) {$scope.names = response.records;});            
});

The strange behavior is this code works perfectly fine in IE11 , whereas it doesn't run in Chrome/Firefox.

Following is the response in the chrome:(for my REST service) , whereas the REST service from w3schools worked just fine.

{"data":null,"status":0,"config":{"method":"GET","transformRequest":[null],"transformResponse":[null],"url":"http://localhost:70/DocumentRESTService.svc/GetDocuments/","headers":{"Accept":"application/json, text/plain, /"}},"statusText":""}

Console displayed following error message.

[Chrome Console:By opening from filesystem]

XMLHttpRequest cannot load http://localhost:70/DocumentRESTService.svc/GetDocuments/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'file://' is therefore not allowed access.

[Chrome Console:hosted using Brackets]

XMLHttpRequest cannot load http://localhost:70/DocumentRESTService.svc/GetDocuments/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://127.0.0.1:55969' is therefore not allowed access.

[Firefox Console:]

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:70/DocumentRESTService.svc/GetDocuments/. This can be fixed by moving the resource to the same domain or enabling CORS.

The question here are few:

Why is localhost or my machineName considered to be a cross-domain request ? I am in the same domain , ain't I ?
Are there any changes required to do at my service end to enable this behavior? If yes , where in WCF Service ?( based on something i read here )
an JSONP be useful in this case ? If yes , how would i use it ? would it work with requests that need custom headers ?( NOt really sure what it is , but while resarching found a lot of answers mentioning this. reading links will be helpful. )

Any help or direction will be helpful.

P.S:

IDE:Brackets , if that matters .
AngularJS v1.4.3
I have referred various stackoverflow questions referring similar problem (CORS) , which involved $resource , $provider , $config , Also some related to deleting some header and adding some value one of the header. I am bit naive to this - any references to this will be helpful.

How do I fix localhost error in CORS?

1. Use the proxy setting in Create React App. "proxy": "https://cat-fact.herokuapp.com/", Now when you make an API request to https://localhost:3000/api/facts Create React App will proxy the API request to https://cat-fact.herokuapp.com/facts and the CORS error will be resolved.

How do you fix the CORS issue in angular application?

CORS error due to browser's same origin policy. To get around this, you need to tell your browser to enable your client and your server to share resources while being of different origins. In other words, you need to enable cross-origin resource sharing or CORS in your application.

What is CORS error in AngularJs?

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://host/training_webapi. This can be fixed by moving the resource to the same domain or enabling CORS.

I struggled for way too long with CORS issues caused by the interaction of an emulated Ionic project (running locally) with some small Node.JS web services (also running locally).

Behold the short easy workaround : Chrome's plugin AllowControlAllowOrigin.

https://chrome.google.com/webstore/search/cross%20origin?utm_source=chrome-ntp-icon&_category=extensions

Just switch the radio button from red to green, and no more blocked request, error or warning ! Of course it's a temporary solution and you may have to put your hands in your request headers when the time to stop the local tests will come. In the meantime, that's a great way to avoid loosing time on those anoying recurrent issues.

CORS issue on localhost while calling REST service from angularjs

Tags:

rest

javascript

angularjs

cors

wcf

B Bhatnagar

People also ask

1 Answers

Sendil.J

Recent Activity

Donate For Us

CORS issue on localhost while calling REST service from angularjs

Tags:

rest

javascript

angularjs

cors

wcf

B Bhatnagar

People also ask

1 Answers

Sendil.J

Related questions

Recent Activity

Donate For Us