AngularJS $http request to Web Service requires CORS

Question

I am writing a service which needs to access a WebService (which I have no control over) - an API which I would like to consume in my application. I have visited the url in question within my browser and the login is successful, and I can see my access token, however when I try to use $http to visit the same page I get errors in the developer console in IE.

angular.module("app").factory("MyService", function($http){
    var serviceUrl = "http://some-web-page/service.asmx/";

    var logOn = function(username, password){
        var getUrl = serviceUrl + "logOn?username="+username+"&password="+password;
        $http.get(getUrl).then(
                function successCallback(response){
                    console.log("Success");
                    console.log(response);
                }, function errorCallback(response){
                    console.log("Error");
                    console.log(response);
                }
        );
    };

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

and in the console I am getting

HTML1300: Navigation occurred.
File: home
HTML1503: Unexpected start tag.
File: home, Line: 5, Column: 1
SEC7118: XMLHttpRequest for http://some-web-page/service.asmx/logOn?username=username&password=password required Cross Origin Resource Sharing (CORS).
File: home
SEC7115: :visited and :link styles can only differ by colour. Some styles were not applied to :visited.
File: home

SEC7120: Origin http://localhost not found in Access-Control-Allow-Origin header.
File: home
SCRIPT7002: XMLHttpRequest: Network Error 0x80070005, Access is denied.

You've to enable CORS in the server (I know you don't have control over the server). It's usually turned off in servers to prevent Cross Site Request Forgeries. — Pirate X, Dec 16 '15 at 08:58
Why would someone build an API that cannot be accessed though? Is there another way I can do this? — Josh Brass, Dec 16 '15 at 09:10
I think you're working locally which is creating the issue. You can turn off web security on localhost. But not really sure about production servers - Here you will find steps to turn off -> [By Pass CORS](https://blog.nraboy.com/2014/08/bypass-cors-errors-testing-apis-locally/) — Pirate X, Dec 16 '15 at 10:33
I am running a local server (WampServer) and running on localhost. — Josh Brass, Dec 16 '15 at 10:37
navigate to the path of your installation via a command prompt and run the following: `Chrome.exe --disable-web-security` — Pirate X, Dec 16 '15 at 10:41
I do not have chrome installed - most of the usage from this page will be from IE as it is company policy. — Josh Brass, Dec 16 '15 at 10:43
I have just checked the IE options - it looks like "Access data sources from across domains" is disabled and the "Enable" button is disabled on my machine.. — Josh Brass, Dec 16 '15 at 10:46
I cannot click the "Enable" button because the button itself is disabled on my machine — Josh Brass, Dec 16 '15 at 14:33

score 1 · Accepted Answer · answered Dec 16 '15 at 08:59

1

You cannot make a query to the remote server from your client side (regardless of which framework you are using, underneath it is all built on top of XMLHttpRequest) unless they enable and implement CORS on their side (server hosted at http://some-web-page/service.asmx/ ). You can make the request to your server and from your server to the remote server instead, however this is not always an ideal solution.

answered Dec 16 '15 at 08:59

Yerken

1,944
1
14
18

The console isn't explicitly saying that CORS is not enabled on the server - are you sure that's the issue? Also - I've not currently got a server set up so not sure that is an ideal solution for me. Perhaps I will find the need to create a server somewhere down the line but this application is only a read-only application using APIs of different systems currently. – Josh Brass Dec 16 '15 at 09:08
Error message may vary on the browser you are using, personally would not rely on that. Some insight on what is the service you are trying to call and what is ur application for could be helpful – Yerken Dec 16 '15 at 14:37
I am calling a third party document management system in order to expose a simple set of functionalities on a new web page - specifically to search for and download documents (in a read-only fashion). Authentication is required. – Josh Brass Dec 16 '15 at 14:40
if you are wondering if the service is purposefully blocking "localhost" originated requests, just try to send request from different domain (open console tool and make a get request to the remote server). – Yerken Dec 16 '15 at 14:43
http://stackoverflow.com/questions/21455045/angularjs-http-cors-and-http-authentication check out this one on how to set proper headers to implement authentication with $http service. If u can provide a link to the service, it could be helpful. Quick side note, based on your explanation regardless of whether service require authentication enabling CORS to every domain opens up a huge deal of vulnerabilities for the service itself. – Yerken Dec 16 '15 at 14:48
Tried from stackoverflow.com and got no luck... looks like you're right – Josh Brass Dec 16 '15 at 14:49

score 0 · Answer 2 · answered Dec 16 '15 at 09:47

For chrome and mozilla there is a plugin called cors install it, There will be no problem like cors. https://addons.mozilla.org/en-US/firefox/addon/cors-everywhere/ https://chrome.google.com/webstore/detail/allow-control-allow-origi/nlfbmbojpeacfghkpbjhddihlkkiljbi?hl=en

AngularJS $http request to Web Service requires CORS

2 Answers2